HTML5 Application Cache

The application cache is one of the poorly understood part of the HTML5 specification with a lot of potential. Web sites/applications consist of web pages that need to be downloaded from a network. For this to happen there must be a network connection. However there are many instances when users cannot connect to a network due to many reasons.
HTML5 provides the ability to access the web application even without a network connection using the cache manifest.

Why use Application Cache?

It is becoming increasingly important for web-based applications to be accessible offline. All browsers have caching mechanisms. If Application cache is used correctly, the performance of your website shoots up high, webpages load immediately, impressing the visitors and thus driving more traffic on to your site. The users will still be able to access your website when there is no internet connectivity.

Working Example:

Go to www.mobinius.com/offline.html and disable the internet completely. If you reload the page you should still be able to see the images and the content of the page word-by-word !!

How to use Application Cache?

In brief, list all the files you want to cache in the cache manifest file and include the manifest attribute in thetag to enable the application cache for that particular html page. A manifest file must be served with the mime-type text/cache-manifest. You might want to create a file named .htaccess and add the following to it AddType text/cache-manifest .appcache Structure of a Manifest File: CACHE MANIFEST # LAST UPDATED 01/30/13
CACHE:
index.html
offline.html
FALLBACK:
/ offline.html
NETWORK:
*
The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK. The CACHE MANIFEST string is the first line and is required.
CACHE: This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they’re downloaded for the first time.
NETWORK: Files listed under this section are resources that require a connection to the server every time. These files are never cached.
FALLBACK: This section is for handling situations wherein a user tries to access a resource that is in-accessible or not cached

Advantages of Application Cache:

1. Offline browsing – users can navigate your full site when they’re offline
2. Speed – cached resources are local, and therefore load faster.
3. Reduced server load – the browser will only download resources from the server that have changed.

Disadvantages of Application Cache:

1. Files always come from the application cache, even if you’re online
2. The application cache only updates if the content of the manifest itself has changed
3. Non-cached resources will not load on a cached page. See for yourself

Best Practices:

1. Never ever-ever in the far- future cache the Manifest file.
2. Every time changes are made in the web pages, modify the Manifest file. Use a comment to keep track of when it was modified (refer ‘Structure of Manifest File’ section)
3. Do not use application cache if the content of the web application is changed constantly.
4. Programmatically cross-check if the manifest file is modified. If yes, make sure to cache the new version of the web-application.

Quick Learning:

Download the source code included at the bottom, upload the whole contents of the folder to your desired url through a FTP. Disconnect the internet and refresh the page. You should still be able to see the content of the downloaded file.