I think that this is the coolest feature of the lot that HTML 5 supports . Recollect the days when you have an important work that needs to be done online like a document that needs to be shared with the client/colleagues in the middle of night and you have no other option in your hand rather than contacting the service provider to have a look into the network problem in your local system , wake up in middle of your sleep and check for the network is up or not and once the network is up send across the document to the client/colleague in a mail.
Times have changed !!!!Now you have an option to update your document that is available online update it even if the network is down , once the network is up your document gets updated online automatically with word to word change that you have made in your document while the network was down .
Thinking how is it possible????We have live example in front of us…Google Online Doc…
The basic idea that goes in building such a application is store the changes made by the user in local memory and once the network is up , update the server with the latest/updated document .
That’s what HTML5 brings to developers as well as online users table ….isn’t it cool.
As you read further you will get to know more idea on how this is implemented and what the logic that is put in to implement this.
Basic Concept of Working OFFLINE
The first time that you visit any Offline enabled site the server tells the browser the file that are required to make it available offline , once all the necessary files are downloaded on users local system you can view the site even if you are not connected to internet .
Now comes the technical part
There are number of browser supported properties that can be made use of to build an offline web application some of them are explained below
1) Does browser support Offline cache
applicationCache à This property is available if the browser supports Offline Web applications , this property is available in the global window object , incase of the browser doesn’t support offline web applications this property will be undefined.
I will start of explaining with the properties that were used for building this demo application at my end.
As the browser doesn’t know which files are required to build an offline web application so one can create a manifest file that will hold the names of the files that are required by the browser to access the web application offline . You can specify files like Javascript , CSS , HTML , Images in this manifest file .You can link this manifest file to your HTML page in below format
<html manifest="cache.manifest">
Now you would be thinking why do we need to do this ???
Well the answer is all browsers have some kind of caching mechanism in place, but to be honest, they don't always work. When you open the site on your system after a while(like after rebooting the system,…) and click the Back button in the browser hoping to see the previous page that was opened. However, as you are not connected to the internet and the browser didn't cache the page properly, you are unable to view that page. You then click the Forward button thinking that at least that page will load, but it doesn't. You need to reconnect to the internet to be able to view the pages.
Until HTML 4, the only work around was that the user has to save each page individually. HTML 5, provides a smarter solution. While building the site, the developer can specify the files that the browser should cache. In fact, on each page, you can specify which documents should be cached. So, even if you refresh the page when you are offline, the page will still load correctly.
Note that the MIME-TYPE of this manifest file should be text/cache-manifest .There are more details that the manifest file contains but I wil take that in next blog as right now we will concentrate on our main course.
2) Detecting ONLINE/OFFLINE
onLine à Developer can make use of this JavaScript property to detect the status of connection(ONLINE/OFFLINE) , this property is supported by most of the browsers and it returns TRUE if it is online and FALSE in case it is offline.
Fire Fox also provides online and offline event that the developer can make use of and attach handlers for it.
/*This function will return true if browser is in ONLINE mode and will
Return false if it is OFFLINE */
function checkStatus()
{
return navigator.onLine;
}
OR
/* Using handlers */
window.addEventListener("online", function(){
.../*action to be performed*/ ….
});
window.addEventListener("offline", function() {
.../*action to be performed*/ ….
});
The data storage area that we are going to discuss out here is a simple DOM storage for saving data in offline mode.DOM allows us to store data as string and the data stroed in DOM object can be shared across tabs , between browser sessions
The properties that can be made use of for storing and retrieving data are as below
sessionStorage : This property can be made us of for storing data for the duration of session . This session lasts as long as the browser is
open, opening a new tab or windows causes a new session to be created .
localStorage : This property can be made use of for storing data for a longer period . The data is not destroyed even when the user closes
the browser or turns of the system .
Above property can be made use of in below format
window.sessionStorage.setItem(“Key”, “Value”);
The setters and getters that we get while using the sessionStorage property are as below
setItem(string key , string value ) …. when data needs to be added or updated
getItem(string key) …. when we need to retrieve data from memory
removetem(string key) …. when we need to delete any entry from memory
clear() …. when we need to clear memory
Before I put an end to this I would like to summarize it
The most important things that one must remember while developing Offline Web Applications are storing user inputs , creating manifest file , and keep a check on the connection changes .
