The "Offline" Web Application

bridgwatera | No Comments
| More

This is the third blog post by Mat Diss, founder of bemoko.com, 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;
if(todo!=""){
try{
localStorage.setItem(itemId, todo);
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!');
}
}
}
var todo = document.getElementById('todo').value = "";
document.getElementById('todo').focus();
getData();
}

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 += '

'+todo+'
';
}

//if there were no items in the database
if (todoLog == "")
todoLog = '

Log Currently Empty
';

document.getElementById("todoList").innerHTML = todoLog;
}

function removeItem(itemKey) {
localStorage.removeItem(itemKey);
getData();
}

function clearData() {
localStorage.clear();
getData();
}

window.onload = function() {
getData();
}


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 http://blog.bemoko.com/2009/09/16/cool-iphone-handles-the-html5-onstorage-event-handler/)













Leave a comment

Subscribe to blog feed

About this Entry

This page contains a single entry by Adrian Bridgwater published on September 27, 2010 9:23 AM.

Michael Dell talks 'Zettabytes' at Oracle OpenWorld was the previous entry in this blog.

AVG launches Internet Security Suite 2011, but what about the Bayesian probability factor? is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.