Phonegap events online/offline not working

Question

I am writing app with phonegap(cordova) 3.0.0 and events "online" and "offline" doesn't work. When I tried event "resume", this event was OK. I am using XCode 4.5 and IOS.

This is my main javascript file of phonegap project:

var app = {

    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        document.addEventListener('online', this.onDeviceOnline, false);
        document.addEventListener('resume', this.onDeviceResume, false);
    },

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },

    onDeviceOnline: function() {
        app.receivedEvent('deviceonline');
    },

    onDeviceResume: function() {
        app.receivedEvent('deviceresume');
    },

    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

Thank for advices

Answer 1

if you want to display online / offline status you need to add network-information plugin first with command prompt

$ phonegap local plugin add org.apache.cordova.network-information

after adding that plugin your online / offline event should work, it work fine for me

Answer 2

These events has to be bind inside "onDeviceReady", they will not work before the DeviceReady event. Check this Attach an event listener once the deviceready event fires

bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
    document.addEventListener('resume', this.onDeviceResume, false);
},

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    document.addEventListener('online', this.onDeviceOnline, false);
},

Please note that online/offline event is not fired when the app starts, these event only get fired when connectivity state changes. Let say when app starts in online mode, until it goes offline, offline event will not be triggered, same for online event.

To check the current connectivity, you need to use the below code

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    document.addEventListener('online', this.onDeviceOnline, false);
    if((navigator.network.connection.type).toUpperCase() != "NONE" &&
       (navigator.network.connection.type).toUpperCase() != "UNKNOWN") {
        this.onDeviceOnline();
    }
}

Answer 3

在corodova（而不是phonegap）中，您必须以这种方式添加插件：
cordova plugin add org.apache.cordova.network-information

Answer 4

you should add Connection plugin to your project and then this events will be fired.

to add Connection plugin use following command:

CMD> phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

Answer 5

In the phonegap folder project:

phonegap plugin add org.apache.cordova.network-information

In index.js :

var app = {};
app.initialize = function() {
    document.addEventListener("online", function(){alert('online : true') }, false);
    document.addEventListener("offline", function(){alert('online : false') }, false);
};

In index.html , somewhere :

<script type="text/javascript">
app.initialize();
</script>