Inspired by a HTML5 GTUG-Campout Meeting I decided to play around a little with HTML5. In this post I will show an example how to create book instances in a book management web application while being offline and push all the books into the database by the time the user is online again.

The use case for my little example is the following: A user is offline and wants to enter some new books into a book management web application.

OK the first question that arises is: How can a client detect whether it is on- or offline? The answer is it shouldn’t be automatically and you can find a good answer to that here. So the user needs to be aware whether he is online or not and triggers a syncronisation with the web server by himself.

In HTML5 you have a client side storage where you can place stuff. It is a key/value pair storage with a maximum size of 5MB per origion. To persist an object (in my example a book) you best better use JSON. The following code snipplet shows a JavaScript function called preserve that collects all entered details for a book from an input page and places the result in the local storage. The local storage can be accessed with localStorage as you can see in line 15.

function preserve() {

	function getValueById(id) {
		return document.getElementById(id).value;
	}

	var JSONbook = {
		"title" : getValueById("title"),
		"isbn" : getValueById("isbn"),
		"author" : getValueById("author1")
	};

	var bookString = JSON.stringify(JSONbook);

	localStorage.setItem(localStorage.length + 1, bookString);
}

Due to the fact that you can only place strings into the key/value store one has to convert the JSON object into a string. This can be achivied with the help of the following free javascript stringifier/parser which I use here in line 13.

Of course localStorage.length + 1 is not a good way to generate a key, but for this experimental example it suits the needs.

So now when a user is back online and decides he wants to push all the newly created books into the database server a little Javascript like the following could do the job for him. For example by clicking on a button the persistAllBooks gets invoked. This function sequentially reads all book objects from the localStorage and calls the post_to_url function for each book. post_to_url builds up a form, fills it with the books attributes and pushes them to the server.

function persistAllBooks() {
	for (var i = 1; i <= localStorage.length; i++) {
		var item = localStorage.getItem(i);
		var parse = JSON.parse(item);
		post_to_url(parse);
	}

}

function post_to_url(params) {
	var form = document.createElement("form");
	form.setAttribute("method", "post");
	form.setAttribute("action", "/bookmngt/book/save");

	for (var key in params) {
		var hiddenField = document.createElement("input");
		hiddenField.setAttribute("type", "hidden");
		hiddenField.setAttribute("name", key);
		hiddenField.setAttribute("value", params[key]);

		form.appendChild(hiddenField);
	}

	document.body.appendChild(form);
	form.submit();
}

Thats it. Of cource the book creation page needs to be offline available to the client and HTML5 is helping here too.

Thanks to Thomas Asel for brainstorming and talking about HTML5 which led to this post.

HTML5 Resources

The following list contains some good HTML5 resources I found on the net while experimenting a little.

Dive Into HTML 5 – diveintohtml5.org
Browsers with Wings – slideshare.net/remy.sharp/browsers-with-wings
HTML5 on Wikipedia – en.wikipedia.org/wiki/HTML5
“Offline”: What does it mean and why should I care? – www.html5rocks.com/tutorials/offline/whats-offline