How To Create an Offline Web Application

Contributing Editor

offline web applicationThe majority of browser vendors are introducing offline web application functionality within HTML5. It allows an online application to work even if the user loses or disconnects their internet connection. For example, you would be able to compose a message in your webmail client even if you couldn’t find a wi-fi hotspot.

The example provided in this post works in Firefox 3.x. It works to some extent in other browsers — including IE8. However, implementations and feature sets differ. Offline technologies are in a state of flux, so I couldn’t recommend using this code in a production environment.

There are three aspects to creating an offline-enabled application: specifying which required files, determining when a browser goes offline, and saving data locally.

The Cache Manifest

Your browser can’t access files when it’s offline so you need to specify which resources are required so they can be cached. This is achieved in the cache manifest — it’s a simple list of essential files, e.g.


CACHE MANIFEST
styles.css
jquery-1.4.min.js
offline.js
index.html

Save this file as “offline.manifest” and link to it in your page’s html tag:


<html manifest="offline.manifest">

Note that offline.manifest should be served with a text/cache-manifest MIME-type.

When you load the file, the browser will ask whether you permit data to be stored on your PC.

How to Detect When a Browser Goes Offline

JavaScript code can detect when a browser is online or offline using navigator.onLine. This property is supported by most browsers and returns true when online or false when offline.

Firefox also allows you to attach handlers to the online and offline events of the window object, e.g.


// standard event listeners
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });

// or jQuery alternative
$(window).bind("online offline", function() { ... });

Saving Data Locally

DOM storage is one of the simplest methods of saving data when offline. You can use either:

  • window.sessionStorage to retain values for the duration of the session, or
  • window.localStorage to retain values for longer periods.

Both objects offer the same methods:

  • setItem(string name, string value): add or update a value in the store
  • getItem(string name): get a named value from the store
  • removeItem(string name): remove a named value from the store
  • length: number of values stored
  • key(long index): name of the key at the index
  • clear(): clear the store

Example:


// set a session value
window.sessionStorage.setItem("key", "my data");

// get a session value - returns "my data"
window.sessionStorage.getItem("key");

Putting it all Together

View the example page…

It’s not very interesting until you select File > Work Offline in Firefox. The status will immediately change to “OFFLINE”. You can then enter some data and click the “Save Data” button. The data will be stored locally rather than being posted to the server. Refresh the page and the values you entered will reappear.

Please download the files if you would like to take a closer look at the code.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.ryvondesigns.com RyvonDesigns

    Great post, and oh-so-timely! With everyone going mobile, we rely on being online even more than before. When we’re offline, it seems like the world comes to a halt and each day webdevelopers have more demands to make items available offline.

    Thanks!
    Pam
    Ryvon Designs

  • W2ttsy

    it will be interesting to see how much value this will add to existing apps. Most of the post process results that people expect after interacting with a form wont be available to the user, so apart from saving to draft mode, i dont see many other options for this sort of tech.

  • http://xtoozee.ru as59

    Oh! It’s fun
    thanks for post
    My brouser is mozilla,I’m use cache in offlne