PhoneGap Online/Offline Tip

Raymond Camden

May. 29, 13 · Interview

Like (0)

Save

9.86K Views

A few months ago I wrote a blog post that talked about "robust" PhoneGap applications. Basically it was a look at the types of things you should consider to make your PhoneGap application more of an app and less of a wrapped web page.

One of the main topics of that blog post was about handling connection status. PhoneGap gives you access to the type of connection the device has as well as events that let you respond to online and offline states. These are important features that (most likely) every single PhoneGap app should be using.

I want to point out though a small issue with the code I shared. It isn't broke, but how I did things could be done slightly different. Consider this code block:

document.addEventListener("deviceready", init, false);
 
function init() {
  document.addEventListener("online", toggleCon, false);
	document.addEventListener("offline", toggleCon, false);
 
	if(navigator.network.connection.type == Connection.NONE) {
		navigator.notification.alert("Sorry, you are offline.", function() {}, "Offline!");
	} else {
		setupButtonHandler();
	}
 
}
 
function toggleCon(e) {
	console.log("Called",e.type);
	if(e.type == "offline") {
		$("#searchBtn").off("touchstart").attr("disabled","disabled");
		navigator.notification.alert("Sorry, you are offline.", function() {}, "Offline!");
	} else {
		$("#searchBtn").removeAttr("disabled");
		navigator.notification.alert("Woot, you are back online.", function() {}, "Online!");
		setupButtonHandler();
	}
}

I want you to notice two things. I've got event listeners for my connection status. Then I have an immediate check. My thinking was, "I want to know when things change in the future but I also need to know what's going on right now."

However, it turns out that this isn't actually necessary. If you add event listeners for the online/offline events in the main body load event (not the PhoneGap device ready), then the appropriate event will be fired automatically.

If you read the docs for the events (http://docs.phonegap.com/en/2.7.0/cordova_events_events.md.html#online) closely you will see that they demonstrate using the body load event. What may not be clear from the docs though is that even though your connection may not change, the event really is fired for you. Here is an example that I've slightly modified from the docs.

<!DOCTYPE html>
<html>
  <head>
    <title>Cordova Online Example</title>
 
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
 
    // Call onDeviceReady when Cordova is loaded.
    //
    // At this point, the document has loaded but cordova-x.x.x.js has not.
    // When Cordova is loaded and talking with the native device,
    // it will call the event `deviceready`.
    //
    function onLoad() {
        document.addEventListener("online", onOnline, false);
        document.addEventListener("offline", onOffline, false);
        document.addEventListener("deviceready", onDeviceReady, false);
    }
 
    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        console.log("onDeviceReady");
    }
 
    // Handle the online event
    //
    function onOnline() {
        console.log("onOnline");
    }
 
    function onOffline() {
        console.log("onOffline");
    }
        
    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

Using this way of handling the events, I would not need a check in onDeviceReady. Thanks go to fellow Adobian Shazron for pointing this out.

So... do you have to use this way of handling it? To be honest, I prefer my way. It is a bit more coding, but I'd rather not have onload event with logic and a ondeviceready. My way just "feels" better to me, but I reserve the right to change my mind in the next five minutes. ;)

Event

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments

Trending

Trending

PhoneGap Online/Offline Tip

Trending

Partner Resources