This has actually been sitting as a draft for several weeks. I had decided it was time to dive more deeply into the offline app features of HTML5, and this was to be a streamlined quick start.

Aside: I got a wild hair and wrote all the code you’ll see in this post using Console2 and Notepad++. If you haven’t checked out Console2, here’s a post by Hanselman that will change your life (at least the part you spend at the command line).

Standard HTML and JavaScript

I wanted to keep this very small and simple, focusing only on the new feature being tested. To that end... 

notepad++ index.html

I dummied up the basic HTML structure with a completely empty body. I just gave it a title and two script tags in the head, one to jquery on code.jquery.com, one to my own offlinehtml5.js file.


<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript' src='/offlinehtml5.js'></script>

The offlinehtml5.js file was just an alert to see if everything was wired up.


$(function(){
    alert('wicked!');
});

Cache Manifest - The New Bit

The next step was to add an attribute to the <html> tag that specifies a manifest of resources required for offline access. 

<html manifest="/cache.manifest">

The cache.manifest file isn’t anything special. It’s just a plain text file listing what your app will need in order to run. Note that the first line must be “CACHE MANIFEST”. After that, URL, URL, URL. Here I have .js files, but these could also be images or whatever else you want to be available offline. Also note that the extra blank lines are being added by WordPress or SyntaxHighlighter and are unnecessary.


CACHE MANIFEST
http://code.jquery.com/jquery-1.6.1.min.js
/offlinehtml5.js

Web Server Configuration

You'll have to make sure that .manifest files are served as text/cache-manifest, so hop into your web server and take care of it. In IIS7, you'll be looking for these screens.

image

Note that IIS7 comes with .manifest registered as a MIME type, but it’s not text/cache-manifest. The image below shows the proper setting.

image

That's It

You should be set, and supported browsers will now pull down the resources in the manifest for offline use. There are other options that can be set in the manifest to prevent a file from ever being pulled down for offline use or to set fallbacks. Until I cover them here, you can always read more at Dive Into HTML5.

This post originally appeared on The DevStop.