Checking the online status with PhoneGap & jQuery

By Nic "Aitch" Haynes  ·   March 14, 2011  ·  2 minute read

When using Phonegap to build native iPhone projects you need to setup offline detection, especially if you're making AJAX calls. Phonegap has a very easy to use API for this, but it can be a little tricky when used in conjunction with jQuery.

When using PhoneGap to build native iPhone projects you need to setup offline detection, especially if you’re making AJAX calls. PhoneGap has a very easy to use API for this, but it can be a little tricky when used in conjunction with jQuery.

You’re probably already familiar with jQuery’s on-ready state:

$(document).ready(function(){
// Stuff to do after document is ready
})

But PhoneGap has its own ready state that’s completely agnostic of jQuery:

document.addEventListener("deviceready", onDeviceReady, false)

Let’s make PhoneGap’s listener a little more jQuery-esque for the sake of consistency:

$(document).ready(function() { 
 $(document).bind('deviceready', function(){
 // Phonegap ready
 onDeviceReady()
 })
 // Your main code
})

We also need to define some necessary functions before $(document).ready().

// PhoneGap is loaded and it is now safe to make calls PhoneGap methodsfunction onDeviceReady() {
 navigator.network.isReachable("google.com", reachableCallback, {});
}
// Check network status
function reachableCallback(reachability) {
 // There is no consistency on the format of reachability
 var networkState = reachability.code || reachability;
 var states = {};
 states[NetworkStatus.NOT\_REACHABLE] = 'No network connection';
 states[NetworkStatus.REACHABLE\_VIA\_CARRIER\_DATA\_NETWORK] = 'Carrier data connection';
 states[NetworkStatus.REACHABLE\_VIA\_WIFI\_NETWORK] = 'WiFi connection';

 // We want to be able to check the online variable in our jQuery
 if (networkState != 0) online = true;
}

Now, here’s the problem: PhoneGap initializes asynchronously to jQuery so if you set an online state in your callback, jQuery will never get it. Once jQuery hits the onDeviceReady() function it will wait until it completes, but it won’t wait until its callback completes.

The solution? We set the online state from the browser itself before jQuery initializes (we’ll also get the online state from PhoneGap after):

var online = navigator.onLine

Your code now should be something like so:

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
function onDeviceReady() {
navigator.network.isReachable("google.com", reachableCallback, {});
}
// Check network status
function reachableCallback(reachability) {
 // There is no consistency on the format of reachability
 var networkState = reachability.code || reachability;
 var states = {};
 states[NetworkStatus.NOT\_REACHABLE] = 'No network connection';
 states[NetworkStatus.REACHABLE\_VIA\_CARRIER\_DATA\_NETWORK] = 'Carrier data connection';
 states[NetworkStatus.REACHABLE\_VIA\_WIFI\_NETWORK] = 'WiFi connection';
 if (networkState != 0) online = true;
}
var online = navigator.onLine || false;
$(document).ready(function() { 
 $(document).bind('deviceready', function(){
 onDeviceReady()
 })
 // Your main code
})
Now if you about to make an AJAX call to load up some dynamic data, you can easily check to see if you're online
if(online) {
 // make a request
} else {
 // load from localStorage
}

Be sure to checkout the official PhoneGap documents for more info: http://docs.phonegap.com/