Detect offline situation

1

Is it possible to detect when an app created with phonegap is offline?
I have seen a post with the following event - listener:

document.addEventListener("offline", onOffline, false);

Then, a function “onOffline” will handle the situation.

I have added the above EventListener on Global Code together with the function handling the event:

function onOffline() {
  alert ("You are offline !");
}

but nothing happened when I went offline…

Why?
Should I place the code somewhere else?

2

Here’s a discussion on Stack Overflow:

Have you tried checking navigator.onLine before doing a web operation? That may actually be preferable to taking action every time the status changes.

3

In your device ready event handler you need this:

  // handle when the device looses it's connection
  document.addEventListener("offline", onOffline, false);
  document.addEventListener("online", onOnline , false);
 
  // handle pause and resume  
  document.addEventListener("pause", onPause, false);
  document.addEventListener("resume", onResume, false);

Then, in a .js file that never leaves memory you need these event handlers:

// the user has taken the device offline (airplane mode? loss of connections?)
function onOffline()
{
  checkConnection();        // this will check the connection and display the offline message
}

// the user has put the device back online (turned off airplane mode? Regained connection?) 
function onOnline ()
{
  checkConnection();        // if a connection exists, this will hide the offline message
  gps.checkLocation();      // make sure we have permission to use the gps and that gps exists 
}

// this happens when the user switches apps.  Our app has not
// been terminated but is (temporarily) in the background 
function onPause() {
  // In this code I save which page was active... if it was my error
  // page I check if the condition still exists and if so, I clear the error
}

function onResume()
{
  // do stuff when the app comes back to the foreground
  // this doesn't get called on app startup, just when the app is pushed to 
  // the background (like if the user had to access settings) and then brought
  // back the foreground
}
1 Like
4

Forgive my ignorance, but when you say “Then, in a .js file that never leaves memory” what do you mean?
Should I create a .js file and place it in the project or where should I place this code?

BR

5

I was afraid that comment would be confusing. Here’s a tiny primer (and warning of things to come).

IF you’re developing a very large (lots of pages) or complex (lots of javascript code) app, you’ll eventually hit a spot where weird things start happening. Turns out, there’s a DOM limitation in phonegap so you can only pack so much css/html/javascript into your index.html.

The solution is to not include all those ,js files in the index.html header. The problem then becomes how do you include them? Turns out, you can use ajax to load a .js file and then call onPageReady() yourself. Here’s an example:

// obviously I don't need my onboarding .js but one time so why keep it in memory all the time?
$.getScript("js/onboard.js", function( data, textStatus, jqxhr ) {
     onOnboardPageReady();
}).fail(function(xhr, textStatus, error) { jsLoadError(xhr, textStatus, error, "onboarding"); });

Now, what happens when this code is no longer needed is that javascript has a garbage collection process that will automatically remove this from memory. If it’s removed from memory, you can’t use it to handle events.

Code loaded this way “leaves memory.” On the other hand, if you include the .js file in the header of your index.html file, that code will stay in memory.