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

Question

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>

What error / warning is thrown on the console log? – Saurabh Gokhale May 07 '12 at 12:33 — Saurabh Gokhale, May 07 '12 at 12:33

score 19 · Answer 1 · answered May 07 '12 at 14:39

19

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.

answered May 07 '12 at 14:39

Simon MacDonald

23,253
5
58
74

1

Make sure you have the INTERNET and READ_PHONE_STATE permissions in your manifest.xml. Also, if you've recently upgraded PhoneGap to 1.6 or 1.7 make sure your plugins.xml referrs to "NetworkStatus" not "Network Status" the name was changed to remove the space. – Simon MacDonald May 07 '12 at 16:23
@SimonMacDonald : I trurned off Wi-Fi and I tried all codes up and I didn't get result. Is that because I'm on emulator ?? I use cordova 2.0 – Ali Ben Messaoud Aug 26 '12 at 19:45
1

@alibm Well that is hard to say. You may not have gotten an offline event because the emulator can fake a 3G connection. Try putting the emulator into flight mode. – Simon MacDonald Aug 28 '12 at 11:23

score 3 · Answer 2 · answered May 07 '12 at 17:40

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.

Saurabh Gokhale · Answer 3 · 2012-05-07T12:37:33.203

1

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]);
  }

edited May 07 '12 at 12:37

answered May 07 '12 at 12:32

Saurabh Gokhale

53,625
36
139
164

Where should i add the above functions (`onDeviceReady `, `reachableCallback `). Is it in the `app.js`? – user1315906 May 07 '12 at 13:03
You can directly include `navigator.network.isReachable("phonegap.com", reachableCallback, {});` line whereever you want to test your network connection and add a callback function. – Saurabh Gokhale May 07 '12 at 13:25
2

The isReachable method has been deprecated out of the latest versions of PhoneGap. – Simon MacDonald May 07 '12 at 14:36

score 1 · Answer 4 · answered Feb 17 '14 at 06:32

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');
      }

score 0 · Answer 5 · answered Feb 07 '15 at 08:09

0

Just Embed this in your tag

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

answered Feb 07 '15 at 08:09

JOB

85
1
1
10

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

5 Answers5

Linked