How to alert the user when there's no internet connection

问题

I need to alert the user with the following conditions;

Request timed out
No internet connection
Unable to reach the server

Here's the code; How to capture the following conditions when occurred and alert the user ?

failure: function (response) {
    var text = response.responseText;
    console.log("FAILED");
},success: function (response) {
    var text = response.responseText;
    console.log("SUCCESS");
}

I tried the following code to check if the internet is reachable, but it didn't work

var networkState = navigator.network.connection.type
    alert(states[networkState]);
    if (networkState == Connection.NONE){
        alert('No internet ');
    };

UPDATE **

I added the following in my index.html, but, when i disable WIFI, i don't see the alert popping.

<script>
function onDeviceReady() {
    document.addEventListener("offline", function() {
        alert("No internet connection");
    }, false);
}
</script>

回答1:

The best thing to do is to listen to the "offline" event. When you get the offline event you can warn your user and take whatever steps necessary to save data, etc.

For instance, your "deviceready" callback:

document.addEventListener("offline", function() {
    alert("No internet connection");
}, false);

This code should work for most all versions of PhoneGap. It's been in since at least the 1.0 release.

回答2:

Exactly as Simon said, you can use

document.addEventListener("offline", youCallbackFn, false);

or you can interrogate the boolean property

navigator.onLine

(Should return true or false)

However, this technique will tell you whether device is connected. The caveat is such that device can be connected to WiFi, but the router might be offline. In that case, use a polling mechanism, like timely Ext.Ajax.request with lower timeouts. Timeout expired = offline.

回答3:

You can use PhoneGap's NETWORK API

The network object gives access to the device's cellular and wifi connection information.

You can test it in the following way,

 function onDeviceReady() {
        navigator.network.isReachable("phonegap.com", reachableCallback, {});
    }

 // Check network status
 //
 function reachableCallback(reachability) {
     // There is no consistency on the format of reachability
     var networkState = reachability.code || reachability;
     var states = {};
     states[NetworkStatus.NOT_REACHABLE]  = 'No network connection';
     states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
     states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection';

     alert('Connection type: ' + states[networkState]);
  }

回答4:

You can add 'Ext.device.Connection' in app.js of your application. And check your device is online or offline using code:

if (Ext.device.Connection.isOnline()) {
         alert('Connected to internet');
      }
      else{
         alert('You are not connected to internet');
      }

回答5:

Just Embed this in your tag

<body onoffline="alert('PLEASE CHECK YOUR INTERNET SETTING');">

来源：https://stackoverflow.com/questions/10481939/how-to-alert-the-user-when-theres-no-internet-connection

标签

extjs

cordova

sencha-touch

sencha-touch-2