Making a static website into an ultra-fast offline-ready machine is a great way to break into the world of HTML5 appcache. I got dBlogIt up and running in a couple of hours with just just a few changes.

By on

I was browsing around some Ruby documentation site the other day when I realized, Hey! I’m not connected to the internet right now… but this page is still working. And shit! It’s fast! At that point I knew I would, within days, be building offline capabilities into dBlogIt.

Well tonight I got a wild hair up my ass and headed over to one of my favorite tried and true HTML5 resources, Ye Olde Dive Into HTML5. The offline web application stuff is a little outdated, but it was enough to get me rolling. There were basically three things that I needed to do:

  1. Create the blessed appcache manifest file
  2. Point all pages in the site at said manifest
  3. Configure the server to serve the manifest

The appcache

The appcache was the most complicated part of the whole thing, and that’s just because it takes some experimenting and thought about what you might need to save for offline.

The basic strategy is cache the main pages, such as Home, About, and Search; also any super-important assets such as fonts or images. In my case, for perf reasons most of the shit you’d put in that file is already embedded in the pages anyway, so that was cool.

Next up, I needed to define fallbacks for my main pages. This is because all posts and pages on my site are actually sitting in folders and serving the default index.html files. Each of the fallbacks capture the folder and serve up the index.html files in their place.

Last up was to add the networks and whitelist everything so that any page you visit will get added to the cache and become available offline, which by the way, totally works and is awesome.

For good measure I threw a cache-buster in there with the build time. Here’s the manifest.appcache (I’m using Jekyll, thus the YAML header and liquid tags, in case you’re wondering).

Le Pages

In a website situation such as mine, I just want to suck up all the pages a visitor checks out, quietly stashing them away in the cache so they (read, me) can check this shit out when they’re offline.

Turns out that it’s super easy to do. Literally, as opposed to metaphorically, add manifest="/manifest.appcache" to the HTML tag of every page and you’re done. This was drop dead simple for me, because again, using Jekyll, I just needed to edit the default layout.

The server

Most of the tutorials out there talk about how to set up Apache to serve the manifest file correctly. But I’m using nginx. Thus, I had to do some Googling. In the end, one of my favorite and unexpected server resources, h5bp nginx server configs came to the rescue.

I needed to update the mime types to handle the appcache file and just to be safe, I also threw in the the updated charset types found in the main h5bp nginx.conf file sine they looked important. A little service restart and that shit is done.

In summary: point your shits at the magic thing and make the other thing do the stuff with the magic thing. Then offline cache fairies will come and ram shits down your tubes until you can browse your shits offline. :+1: