How To Create an Offline Web Application
The 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, orwindow.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 storegetItem(string name)
: get a named value from the storeremoveItem(string name)
: remove a named value from the storelength
: number of values storedkey(long index)
: name of the key at the indexclear()
: 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.