A Simple Offline Web Application using HTML5

This article presents the basics of developing Offline Web Applications. The majority of browser vendors are introducing offline web application functionality using 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 nearby. This article explains What is Offline Web Application, What is the technology used for developing Offline Web Application, Challenges in developing the offline web application and Market trend for offline web application.

Google is the first company who started developing and giving support for the offline version their online applications. The applications include Google Docs, GMail, etc. using their in-house product Google Gears. After the evolution of HTML 5, they have dropped the support for their own product and started developing the HTML applications.

Why we need Offline Web Application?

When internet connection is not available in the remote areas, offline application would help continue using the application without worrying about connecting to the internet
To avoid loss/inconsistency in storing data due to the lack of network connection. Application could store the data locally if it is unable to connect to the internet
When network is very slow, application can respond fast in the offline mode
Same web application works on Online and Offline is a great advantage to the customers and users

Challenges in Developing Offline Web Applications

There are number of challenging points discussed while developing the offline web applications. The following are the points to be considered for choosing a offline development for your project.

Technology is still evolving and there are many open specifications under W3C group on addressing many of the issues related to the offline apps.
Cross browser compatibility is one of the major challenge while implementing the offline apps.
Implementation is browser specific on most of the cases. For example, when a user accessing an application from ForeFox?, the data is stored locally to only the FireFox browser. It can not be accessed by any other browsers. Every browser has its own local storage for offline access.
Companies like Google has already implemented some of the products in offline version, but still they are not stable and have lot of technical issues on real time use.

Technology Used

HTML5 is the core technology to development offline web applications
Instead of saying it as technology, http://www.w3.org has developed a specification under HTML5 which has to be implemented by the browsers.
Offline technology is implemented done by the browser vendors, developer has to access the browser APIs and make the web application work as offline.

Cache Manifest

HTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.

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:

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. The manifest file which you are specifying on the page lists the resources to be cached locally. This is a normal text file with extension manifest. You should include the manifest attribute on every page of your application that you want cached. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.

How to Detect Offline?

if (supports_html5_storage()){
              var status = document.getElementById("status");
              function updateOnlineStatus(event) {
                var condition = navigator.onLine ? "online" : "offline";
 // Code for detecting the connection status
                status.className = condition;
                status.innerHTML = condition.toUpperCase();
                log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
              }
              document.addEventListener('online',  updateOnlineStatus);
              document.addEventListener('offline', updateOnlineStatus);
          }

Some browsers (e.g., Firefox) display a notification bar the first time a user loads an application that uses the application cache.

HTML5 Storage

Without HTML5, client-side storage for web applications is limited to the tiny storage provided by cookies (4KB per cookie, 20 cookies per domain). In contrast, HTML5 storage provides a much larger initial local storage (5MB per domain), unlimited session storage (limited only by system resources).

There are two types of HTML5 storage when your browser goes offline. One is sessionStorage, which storing on browser memory and the data will be lost once browser is closed. Second one is localStorage which is storing the data in local system for the longer periods. Both the options are available in the DOM API to write offline applications. SessionStorage? and LocalStorage? objects have the same methods for storing the values.

setItem(string name, string value): add or update a value in the store
getItem(string name): get a named value from the store
removeItem(string name): remove a named value from the store
length: number of values stored
key(long index): name of the key at the index
clear(): clear the store

// set a session value
window.sessionStorage.setItem("key", "my data");
// get a session value - returns "my data"
window.sessionStorage.getItem("key");

Local Storage

In this type of storage, application can store the key value pairs in the browser’s cache section. With HTML5 local storage, a larger amount of data (initially, 5MB per application per browser) can be persistently cached client-side, which provides an alternative to server downloads. Data stored not deleted after closing the browser. Also the stored data can be shared among the multiple instances of opened browsers. View the storage details by typing about:cache in the address bar of FireFox. There is limitation in the maximum size for the storage, since this is only the key=value pairs, there is a limit on the maximum entries.

How to check if the browser supports the HTML5 local storage?

function supports_html5_storage() {
     try {
       return 'localStorage' in window && window['localStorage'] !== null;
     } catch (e) {
       return false;
     }
   }

How to store value to local storage?

    localStorage.setItem(key, value);

How to fetch value from local storage?

   localStorage[key];

How to remove value from local storage?

  localStorage.removeItem(key);

( Image Source )