Priyank Sharma
loading...

HTML5 Offline Caching

Feb 9, 2012

[dropcap]I[/dropcap] have been well aware of the Offline Caching feature introduced in HTML5 a while ago. Today I decided to explore it in more detail and this is when I realised its true potential. Not only does Offline Caching help make certain parts or entire websites available for offline use, it also very impressively increases the page load time by up to 200%.

After reading this fantastic article at Dive Into HTML5, I jumped straight into implementation mode. And here I have for all of you, a simple and straightforward 3-step guide on how to implement Offline Caching on your website.

[custom_headline type=”left” level=”h2″ looks_like=”h5″ accent=”true”]1. Create a manifest file[/custom_headline]

A standard text file that should be renamed to [highlight type=”dark”]cache.manifest[/highlight]. Now reference it to the HTML tag.

[code][/code]

You have complete freedom over naming your manifest file – even the extension. So something such as example.mf would work equally well, but I chose to use [highlight type=”dark”]cache.manifest[/highlight] as the name is easily distinguishable.

[custom_headline type=”left” level=”h2″ looks_like=”h5″ accent=”true”]2. Edit the manifest file[/custom_headline]
Next step would be to write instructions in the manifest file.

[code]CACHE MANIFEST
# rev 42[/code]

[code]CACHE:
/about.htm
/clock.css
/clock.js
/clock-face.jpg[/code]

[code]NETWORK:
*[/code]

The [highlight type=”dark”]CACHE:[/highlight] section denotes all the files that you want the browser to cache, whereas the [highlight type=”dark”]NETWORK:[/highlight] section denotes all files that explicitly require internet access. There’s one more section titled [highlight type=”dark”]FALLBACK:[/highlight] which lets you define a fallback resource in case the one your website uses is not available.

[custom_headline type=”left” level=”h2″ looks_like=”h5″ accent=”true”]3. Define MIME-TYPE[/custom_headline]
Finally, the third most important part is to define the MIME-TYPE in your [highlight type=”dark”]HTACCESS[/highlight] file.

[code]AddType text/cache-manifest .appcache

ExpiresActive On
ExpiresDefault “access”
[/code]

The first line defines the manifest file for the server, while the next 3 lines make sure that the server does not provide cached versions of the manifest file. Without this, the server would not know if you make changes to the manifest file and would provide the user with a cached version.

That’s it, you should now be able to experience blazing fast page loads and you can even try unplugging your internet connection to browse your website offline.

[alert type=”info” close=”false” heading=”Important points to note”]– The browser will include any page with the manifest file (referenced in the HTML tag) to its cache. You do not need to separately specify each page in the manifest file.

– Make sure any of the resources specified in the manifest file do not trigger a 404 error, otherwise the browser will simply fail to cache all the resources. (This took most of my time to figure out.)

– Anything after the “#” will be ignored by the browser. Use it for commenting.

– The manifest file will not update any resources by default. You need to make changes to the manifest file to trigger the change. A good way to achieve that is by maintaining revisions in a comment. This is especially useful if you need to replace an image file or maybe the style sheet, etc.[/alert]

I’m truly surprised why HTML5 is all over the web yet this specific feature is still so underrated. Feel free to drop in your comments and correct me if I went wrong somewhere. (Please note that this article was written with an assumption that most of you use Apache servers.)

recent posts
Feb 9, 2012
Feb 9, 2012
Feb 9, 2012