HTML5 / JS - check that application is offline

Question

I'm testing HTML5 offline application. To do that, I'm stopping my local web server (IIS) and open application. It's loaded fine, but it failed as soon as it request server side API method.

I want to prevent that and instead of $.get('/api/method') read data from my local storage. But I can found any facility to understand my application is offline.

if (/* online */) {
  // fire ajax
} else {
  // ask localstorage
}

I tried to use navigation.onLine but it seems to be always true (at least I can see that in Chrome).

Do you have any suggestions?

EDIT: taking into account current answers. Application is clearly understand that it's offline, since it takes resources according to cache.manifest. It's ridiculous to me, that client need to do any kind of tricks and pings. I assume there should be a easy way to check current mode.

Answer 1

One easy way to check is to add a fallback section in your manifest like this:

FALLBACK
/online.js /offline.js

Then in online.js you set a global variable to true, in offline.js you set it to false and you just request online.js by Ajax whenever you plan to do some networking and do whatever processing you need conditionally in the callback. In the meantime, maintain all your app data client side.

An alternative approach is a blocking polyfill for navigator.onLine as suggested by Remy Sharp.

Answer 2

online state could be also checked doing an ajax HEAD request with a timeout and when timeout is reached (or the call returns an error status) you can assume you're working offline (no network capabitlities) and you have to use localstorage instead

In fact, for the sake of state consistency, localstorage should be used as a fallback not only when you're offline, but also when you're online and the specific ajax resource is not temporarily available (e.g. site overload). Of course you will need to make a continuos polling to that resource with regular (or incremental) timeout until it becomes available again.