Howto Enable HTML5 Offline Cache For Your Web Site

Web Sites are getting more and more responsive every day and are literally competing with desktop applications and hence they are now called web applications rather then web sites. If your website or web application is not responsive enough then chances are that your user might leave your website and goto some other similar app which is more responsive.

The faster your web site is the more enjoying and productive experience it brings to your users. There are many ways to speed up you web site specially like using extended expiry dates, compressing the contents, etc etc. But with the HTML5 you have got the offline storage which allows you to not only cache your static content locally on the browser but allows your users to view your site even when they are offline.

Lets see how we can make our website HTML5 compatible and enable offline storage for browsers that support it (almost all latest browsers).

Add HTML5 Doctype

First you need to add HTML5 Doctype to your html, Doctype tells your browser what type of Document Type Definition applies to this particular HTML document. HTML5 comes with the most simplest Doctype as compare to other versions. The Doctype needs to be added to the first line of your HTML document and it should be the first thing of your HTML document. The Doctype of HTML5 is as follows:

<!DOCTYPE html>

Your document should look like this after adding the doctype:

<!DOCTYPE html>
<html>
...

Create a Cache manifest file

The Cache manifest file lists all of your static resources that should be cached. The Cache manifest file’s syntax is very easy but provides all sort of possibilities to list your resources which should be cached and which shouldn’t be. The whole post can be dedicated to explain different possibilities of offline caching, but for this very first post on the topic we will stick to the basic cache manifest file which will list few css, javascript and image files to be stored offline.

Create a cache manifest file named ‘offlinecache.manifest‘ and add the following content:

CACHEMANIFEST
# version: 01
# List files that should be cached under CACHE
CACHE:
images/logo.jpg
images/background.jpg
js/jquery.js
js/slider.js
css/style.css
css/morestyles.css
# List the resources that shouldn't be cached and requires network
# Note you can use * to specify all the resources that are not listed under CACHE
NETWORK:
*

Add Cache manifest Mime-Type

You can name your cache manifest file anything the only requirement is that it should be sent to browser with the mime type “text/cache-manifest“. Assuming that your web site is hosted on Apache, and you have named your cache mainfest file as “.manifest”, you will need to add the following to the your .htaccess file:

AddType text/cache-manifest manifest

Publish your Cache manifest file

Now that your cache manifest file is ready to be served to the browser, you need to tell your browser about the manifest file location. The manifest file location needs to be added to the opening tag of html element with manifest attribute like following:

<html manifest="offlinecache.manifest">

You can specify absolute path or relative paths in the same way as you specify other URIs, if you have store your manifest file in the root of your document tree then your html file might look something like:

<!DOCTYPE html>
<html manifest="/offlinecache.manifest">
...
</html>

Congratulations!

Congratulations!!, If you have followed everything till here, your website will now make use of HTML5 offline storage as cache for static resources.