Developing HTML5 cache for offline access

Internet is omnipotent these days but what is more important than website is the web application. Most of the business users as well as a large number of common users are usually on portable or mobile devices and they don’t always have an access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go. To undertake the process of building a cache with HTML5 for offline access, first of all, requires using a cache manifest file. This is quite simple:

CACHE MANIFEST

# version 0.1

index.html
style.css
script.js
preview.jpg

This cache manifest file needs to be served with a content-type header of text/cache-manifest. This can be done very easily with the .htaccess file:

AddType text/cache-manifest manifest

This will serve all files with an extention of “manifest” with the appropriate content-type header.

To use the cache manifest file, you simply need to add a property to the html element:

Now, the next time a user visits your site / app, their browser will cache the required files. It’s that easy. If they browse to your URL when they’re offline, they’ll get the cached content.

It’s important to note that even when the user is online, the browser will only go to the server to get new content in three cases:

1. The user clears their cache (obviously removing your content).
2. The manifest file changes.
3. The cache is updated via JavaScript

So, to force all your users to reload their cache, you can change something in the manifest file (not the files linked to, the actual content of the manifest file). Most of the time, you’ll probably just want to change a comment, and that will be enough.