Programming

How To Create an Offline Web Application

    Craig Buckler
    Share

    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.