Chapter 23

Offline Applications and Client-Side Storage


  • Setting up offline detection
  • Using the offline cache
  • Storing data in the browser

One of HTML5’s focus areas is enabling offline web applications. An offline web application still works even when there is no Internet connection available to the device. This focus is based on the desire of web application developers to better compete with traditional client applications that may be used so long as the device has power.

For web applications, creating an offline experience requires several steps. The first step is to ensure that the application knows whether an Internet connection is available or not in order to perform the correct operation. Then, the application still needs to have access to a subset of resources (images, JavaScript, CSS, and so on) in order to continue working properly. The last piece is a local data storage area that can be written to and read from regardless of Internet availability. HTML5 and other associated JavaScript APIs make offline applications a reality.


Since the first step for offline applications is to know whether or not the device is offline, HTML5 defines a navigator.onLine property that is true when an Internet connection is available or false when it’s not. The idea is that the browser should be aware if the network is available or not and return an appropriate indicator. In practice, navigator.onLine is a bit quirky across browsers:

  • Internet ...

Get Professional: JavaScript® for Web Developers, Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.