Step 1: Make the Cache Manifest
The trick here is using a cache manifest file. In its most basic form, it’s incredibly simple:
# version 0.1
Step 2: Serve the Manifest Correctly
This file needs to be served with a content-type header of
text/cache-manifest; it’s really simple to do this with a .htaccess file:
AddType text/cache-manifest manifest
This will serve all files with an extention of “manifest” with the appropriate content-type header.
Step 3: Hook the Manifest In
To use the cache manifest file, you simply add a property to the
<html lang="en" manifest="site.manifest">
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.
Caveat: Refreshing the Cache
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:
The user clears their cache (obviously removing your content).
The manifest file changes.
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.
Like a lot of other HTML5 features, the Application Cache is supported by all the modern browsers.
And that’s HTML5′s Application Cache; it’s pretty cool, and I’m sure it will be used by developers, of almost any site, to provide a gracefully degrading experience that keeps their users happy wherever they are. Thanks for reading!