Network and location APIs - HTML5 and CSS3 - page 215

The key point to grasp from this is that the application cache
isn't a good place to store data that will change often; if
you're expecting your user to edit data as part of the
application, then you need to store that data elsewhere.

HTML5 provides several options for storing an application's dynamic
data, as you'll see in the section “Storing data for offline use.” In the
meantime, the next section will cover the other key features of the
application cache that you need to know about.

Managing network connectivity in offline apps
In this section, you'll learn about detecting the status of your offline
application: is it currently online or offline? To understand how to do
this, you'll need to explore some additional features of the manifest file;
but first you'll see why the built-in Offline API isn't appropriate.

HTML5 provides the Offline API to detect whether the browser is
offline or online. It consists of the ononline and onoffline events and a
Boolean property, navigator.onLine . These would be an excellent way of
managing when to attempt to sync data with the server—if they worked.

That's a little harsh—the API does work, but not in a way that's useful
to web authors. The offline state in HTML5 is tied to the state of the
browser, not the state of your network connection or the availability of
the server. Here are the basics of the API :

navigator.onLine —This property is true if the browser thinks it's
online and false if the browser thinks it's offline.

❂

window.online —This event is fired whenever the browser changes
from an offline state to an online state.

❂

window.offline —This event is fired whenever the browser changes
from an online state to an offline state.

❂

A function can be attached to the events either by declaring an ononline
or onoffline attribute on the body element, or by binding an event listener
to the window object in the standard way, as in the following example.