An HTML5 Offline App Example

html5

Thu Feb 25 09:42:33 -0800 2010

If you’ve used GMail, Google Calendar, or other Google web apps on the iPhone, you’ve probably noticed that they store the app code in a local cache. Only the messages (or day’s events, or other dynamic data) are fetched when you load the app. This is because they use HTML5’s capabilities for offline caching.

The HTML5 draft has a simple clock example, which shows how you can specify which files should be cached locally for offline use using something called a cache manifest.

I turned their example code into an app deployable to Heroku. Here's the live demo. It should work in recent version of Firefox (which prompts you to allow offline storage) and Safari (which doesn’t). Chrome doesn’t seem to support it yet.

Basically this boils down to some static HTML, CSS, and javascript; the cache manifest is the one additional piece of the puzzle, which tells which files to cache. Its format is extremely simple:

CACHE MANIFEST
clock.html
clock.css
clock.js

The one potential gotcha is that the cache manifest has to be served with content type text/cache-manifest. You can verify the content type is correct with curl:

$ curl -I http://cachemanifest.heroku.com/clock.manifest
HTTP/1.1 200 OK
Server: nginx/0.6.39
Date: Thu, 25 Feb 2010 02:53:24 GMT
Content-Type: text/cache-manifest