HTML5 Offline Caching

HTML5 Offline Caching

Priyank Sharma Code Snippets 0 Comments

I 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.

1. Create a manifest file

A standard text file that should be renamed to cache.manifest. Now reference it to the HTML tag.

<html lang="en" manifest="cache.manifest">

You have complete freedom over naming your manifest file – even the extension. So something such as would work equally well, but I chose to use cache.manifest as the name is easily distinguishable.

2. Edit the manifest file

Next step would be to write instructions in the manifest file.

# rev 42
CACHE:<br />
/about.htm<br />
/clock.css<br />
/clock.js<br />
NETWORK:<br />

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

3. Define MIME-TYPE

Finally, the third most important part is to define the MIME-TYPE in your HTACCESS file.

AddType text/cache-manifest .appcache<br />
<files cache.manifest><br />
ExpiresActive On<br />
ExpiresDefault "access"<br />

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.

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.

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.)

Leave a Reply

Your email address will not be published. Required fields are marked *