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