html5 offline application

Nerd, Solutions 

In the new HTML standard. HTML5 introduce new capability that will allow programmer to create offline application, that will be able to run even if the user is offline. This is simply achieved by employ HTML5 manifest with list of all files that are needed to be cached by the browser.


To work offline an application need only a manifest telling the browser what it need to store in its local cache. The manifest can be as simple as a list of files. Along with the telling the browser what to cache, you can also tell it what not to cache, ensuring the request to that particular URL always require the user to be online or have connection.

The cache Manifest

This is the simple text file with the file extension of .appcache. This file is what browser use to determine, which files are to be cached and which files are not to be cached into browser local cache.

To tell the browser to look for a manifest is simple, we add the manifest attribute to the HTML element, and point it to the the file containing application manifest.

Code Example

 The cache file has a small syntax to follow. Cache file content can be categorized in three categories. Each category is represented by a form of header. These category headers are CACHE MANIFEST, FALLBACK, and NETWORK.

Manifest content must be under either one category header. Contents that follow the manifest header are the contents that will be cached by the browser local cache, contents that follow fallback header are the contents that will be used when browser fail to load resources, and contents that follow network header are the contents that will require network connection.

The syntax for HTML5 manifest file is like this:







server-connection.js fallback-server-connection.js



 In the code example above. The browser will cache index.html, main.js and main.css into its local cache. Also, the browser will use fallback-server-connection.js when it fails to load server-connection.js file, and the last header in the above code specify that, every file that is located in the folder /cgi-bin/ will require network connection.

 To make google analytics work with offline cached copy we need to use these lines of codes in our cache manifest file.




How to serve the manifest file

In order to serve the manifest file properly, meaning it must have the appcache file extension and it must have the right mime type.

If you are using a common web server like apache, you need to add the following to your mime.types file

text/cache-manifest apache

The application cache

The applicationCache is the object that notifies you of changes to the local cache, but also allows you manually trigger an update to the cache. Only if the manifest has changed will be the applicationCache receive an event saying it has updated.

In the process list from the previous section, once the browser has finished loading the cache the files from the manifest, the update event fires on the applicationCache. we could use this event to tell users that the application they are using has been upgraded and they should reload the browser window to using a simple event listener and a notification.

Code example:

The above code example, will fire an event when the cache ready to be loaded into the browser. When this event is fired, the function handleCacheUpdate will be called.