I was browsing around some Ruby documentation site the other day when I
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:
- Create the blessed appcache manifest file
- Point all pages in the site at said manifest
- Configure the server to serve the manifest
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).
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,
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.
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: