Mr Speaker

Choose your own cache.manifest

I love the HTML5 cache manifest functionality more than the internet itself. It lets me carry my crazy proof-of-concepts around in my pocket - offline - to test out on the train to-and-fro the way-to-work.

The way it works is you add a link to a "manifest" file in the HTML tag. The browser sees the link, reads the file, and uses the information in it to know what to cache. The actual manifest is just a plain text file containing the relative path to every file in the project.

You usually only have a handful of files and so you kid yourself that you can flawlessly create your CACHE.MANIFEST manually. The problem is - the tiniest of typos and it fails. And it always fails. Because of your chronic poor spelling.

So. Here's a small bash command that I like to keep on hand (aliased to nativesucks) to relieve my brain from spelling trauma:

find . -type f -print | sed 's/.\///'

It generates a cache manifest file by starting in the current directory and worming its way through your project - spitting out the file paths, ready for manifesting. You can also pipe it to TextMate, or straight to a manifest file if you prefer:

find . -type f -print | sed 's/.\///' | mate
find . -type f -print | sed 's/.\///' > cache.manifest

You'll probably have to cull some cruft: like if you've got a .git directory, or if you've previously created the cache.manifest - you'll need to remove those lines from the output. Easier to delete than spell though.

Once you have your list of files simmering in your text editor, garnish with:
# v0.1
files go here...

...and serve with a delicious mime type (text/cache-manifest to be exact).

I was going extend it into a mega-command-slash-application that automagically created the entire manifest file and updates the version. But that's just the kind of over-engineering we frown upon in these parts.

One Comment

  1. Nice tip.

    For anyone using Maven to build their app, I made a plugin that generates the cache manifest for you:

    Friday, March 18, 2011 at 2:42 am | Permalink
Captcha! Please type 'radical' here: *
How did you find this thingo? *