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

Scratches

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

Nipha

For Cordova use: cordova plugin add org.apache.cordova.network-information – Breena

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

Hafer

I tried it, but still not working. Only resume, or pause is ok. – Scratches

How are you checking the events? These events will not fire when app starts, it only fire when connectivity state changes, i.e app is online, when starts and when system goes offline, offline event is fired and vice-versa. If you need to check the current connectivity status please see the updated answer. – Hafer

For future reference; As of phonegap 3.0 "network" is gone. It is now "navigator.connection.type". See docs for more info: docs.phonegap.com/en/edge/cordova_connection_connection.md.html – Debi

Does anyone face the issue that I have - #35426246 – Doersten

Answer 3

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

Shanley

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

Padua

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>

Jonas

why does this way trigger function twice on Offline or Online status of Device ? – Famed