CODEWITHSUNDEEP
javascriptioscordovacordova-3
user2374693
user2374693

Reputation: 163

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

Upvotes: 5

Views: 13798

Answers (5)

lepix
lepix

Reputation: 4990

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>

Upvotes: 0

Nicramus
Nicramus

Reputation: 616

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

Upvotes: 2

FnD
FnD

Reputation: 71

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

Upvotes: 7

Hadi Mostafapour
Hadi Mostafapour

Reputation: 2266

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

Upvotes: 0

Ashis Kumar
Ashis Kumar

Reputation: 6554

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

Upvotes: 2

Related Questions