Over a million developers have joined DZone.

PhoneGap Online/Offline Tip

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

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. ;)

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}