The "Offline" Web Application

This is the third blog post by Mat Diss, founder of, a UK mobile Internet software company that is focused on developing new ways for web designers to construct better websites that can be delivered across all platforms.

In this blog, Mat looks at the offline support HTML5 delivers for web applications…

A key benefit of native applications (whether desktop or mobile) is the ability to interact with the application whilst you are offline. The HTML5 offline support allows web applications to achieve this. Google has demonstrated its backing for the HTML5 offline support by announcing that they are no longer supporting Google Gears – an early solution for for offline web access – and are backing the HTML5 offline APIs.

So along with strong support from the major browsers, this is an indication that this API will mature and become an essential foundation for the web. Offline storage will be an essential ingredient of any web application that requests information from a user and delivers essential information that a user would want to access anywhere, anytime.

For example when a user fills in a form, or edits some data it is an important aspect of the user experience that the information entered is not lost and causing frustration. With HTML5, changes can be stored locally in the browser and synced with the main server when a connection is re-established.

Information applications – such as travel guides – also provide much more value if you can access information quickly and reliably, even if you are in the tube, on a plane, or in a foreign country on an expensive data plan.

The example below implements a simple local ‘to do’ list manager:

function storeData() {
var newDate = new Date();
var itemId = newDate.getTime(); //creates a unique id with the milliseconds since January 1, 1970
var todo = document.getElementById(‘todo’).value;
localStorage.setItem(itemId, todo);
} catch (e) {
alert(‘Quota exceeded!’);
var todo = document.getElementById(‘todo’).value = “”;

function getData() {
var todoLog = “”;
var i = 0;
var logLength = localStorage.length-1;
//now we are going to loop through each item in the database
for (i = 0; i <= logLength; i++) {
//lets setup some variables for the key and values
var itemKey = localStorage.key(i);
var todo = localStorage.getItem(itemKey);

//now that we have the item, lets add it as a list item
todoLog += ‘



//if there were no items in the database
if (todoLog == “”)
todoLog = ‘

Log Currently Empty


document.getElementById(“todoList”).innerHTML = todoLog;

function removeItem(itemKey) {

function clearData() {

window.onload = function() {

Which can be used from the following page:

I’ve got to …

Enter something you have to get done

My to do list…

Nothing to do

Note that once this application has been downloaded by the user it can be used offline (i.e. without a network connection). In a full application you would probably want to persist these changes with a back end server when the user does come back on line which can be done by hooking into the on-storage event handler (see

By use of this code snippet, I agree to the Brightcove Publisher T and C
found at

This script tag will cause the Brightcove Players defined above it to be created as soon
as the line is read by the browser. If you wish to have the player instantiated only after
the rest of the HTML is processed and the page load is complete, remove the line.