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:
Your document should look like this after adding the doctype:
<!DOCTYPE html> <html> ...
Create a Cache manifest file
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 “
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:
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!!, If you have followed everything till here, your website will now make use of HTML5 offline storage as cache for static resources.