Offline and online events not getting Called in cordova 3.5.0

Question

I am using cordova 3.5.0 to develop my phonegap application . In that i want to check internet connectivity before web service calls . So i added network status plugin by using the command cordova plugin add org.apache.cordova.network-information . Plugin installed successfully in my application .

After Adding the plugins i added 2 EventListener's one for online and another for offline.

var app = {
    // Application Constructor
    initialize: function() {
        console.log('App initializing...');
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        //This is to allow testing in desktop browser where there is no device ready event
        if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
            document.addEventListener('deviceready', this.onDeviceReady, false);
    document.addEventListener("offline", onOffline, false);
    document.addEventListener("online", onOnline, false);

        } else {
            this.onDeviceReady();
        }

    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        StatusBar.overlaysWebView(false);
        app.receivedEvent('deviceready');
    },
 onOnline:function(){
     console.log("Online");
    }.
   onOffline: function(){
     console.log("Offline");
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        require(['router'], function(Router){
            Router.getInstance();
            console.log('Backbone callback...');
        });
    }
    };

So i used another method to check online status as mentioned in Phonegap documentation

function checkConnection() {
    var networkState = navigator.network.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.NONE]     = 'No network connection';

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

which is always returning the mode am connected to internet for e.g "WiFi connection" . Though i changed my disconnected my internet connection .

Help me resolving this issue .

Answer 1

I had the same problem: the online/offline event was not firing, and sometimes when it went offline, the app crashed...

THE SOLUTION: - The appropriate permission tag must bem IMMEDIATELY after the tag , in the AndroidManifest.xml file... it may appear ridiculous, but otherwise the event was not firing.

In the end, your file will look like:

<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" android:windowSoftInputMode="adjustPan" package="br.com.burkard.app" xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />

Answer 2

Scope.

document.addEventListener("offline", this.onOffline, false);
document.addEventListener("online", this.onOnline, false);

Answer 3

I avoid using the network types, as I found they do not work consistently on all platforms.

Instead I use:

 isOnline = function() {
    try {
    if (!navigator.onLine){
        return false;
    } else {
        return true;
    }
    }
    catch(e) {
        alert('An error has occurred: '+e.message);
    }
    };

Answer 4

I would do to things.

• First add the online and offline eventlisteners only in the onDeviceReady function,
• Second, add scope to the onOffline and onOnline method calls in the event listeners.

Something like this:

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
    document.addEventListener('deviceready', this.onDeviceReady, false);
} else {
    this.onDeviceReady();
}

},

onDeviceReady: function() {
    StatusBar.overlaysWebView(false);
    app.receivedEvent('deviceready');

    document.addEventListener("offline", app.onOffline, false);
    document.addEventListener("online", app.onOnline, false);
},

onOnline:function(){
    console.log("Online");
}.
onOffline: function(){
    console.log("Offline");
},