HTML and CSS Reference
In-Depth Information
Part of HTML5 includes a property on the navigator object that
is supposed to tell you if the browser is online or offline, via
navigator.onLine
However, as we've already seen when discussing online and
offline events, this property changes only when a user explicitly
sets the browser to work offline (with the exception of some
mobile device browsers). As a developer, what you'd really want
is to detect whether or not the browser can connect to your
application server. A far more reliable way to do this is by using
the cache manifest's
FALLBACK
category. By including a
FALLBACK
rule in our manifest, you can pull in a piece of JavaScript and
detect whether you're online or offline.
Yo u r m a n i f e s t :
CACHE MANIFEST
FALLBACK:
online.js offline.js
online.js contains:
setOnline(true);
offline.js contains:
setOnline(false);
In your application you have a function called
testOnline
that
dynamically creates a script element that tries to load the
online.js
JavaScript file. If it succeeds, the
setOnline(true)
code is run. If you are offline, behind the scenes the browser
falls back on the
offline.js
JavaScript file, which calls
setOnline(false)
. From there, you might want to trigger the
applicationCache.update()
:
function testOnline(fn) {
var script = document.createElement('script')
script.src = 'online.js';
// alias the setOnline function to the new function
¬ that was
// passed in
window.setOnline = function (online) {
document.body.removeChild(script);
