Phonegap events online/offline not working

问题:

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

回答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

回答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();
    }
}

回答3:

In corodova (not phonegap) you have to add plugin in this way:
cordova plugin add org.apache.cordova.network-information

回答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

回答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>