Skip to main content

Going offline.

I’ve been excited for some time about the idea of designing offline-friendly experiences. Finally took some very modest steps at making this little site work offline, so I thought I’d write up what I’ve done so far.

First, and most importantly, I’ve added a service worker to my website. I’m late to this particular party, but: a service worker’s a little bit of JavaScript that gets installed in the background and can, among other things, intercept and process network requests—if your browser supports service workers, that is. My service worker’s a modest affair, but it’s responsible for caching pages as you browse, as well as the static files that control my site’s design. Additionally, if you’re offline, it displays a page of content you can read without a connection.

(By “my” service worker, I mean I’ve lightly modified Filament Group’s service worker, which was itself a lightly-modified version of Jeremy Keith’s service worker. I quite like how Jeremy’s set up his script, which he’s written about in great detail: the event-driven layout makes a lot of sense to me, and I like how HTML requests check for a network connection before referencing the cache.)

Secondly, I wrote a little script to keep my offline page “current”, and have it display any blog entries you’ve added to the cache. This was inspired by a pattern I saw on Mike Riethmuller’s service workers tutorial, where his offline page prints out a list of all the pages available for offline reading. But whereas Mike’s showing a list of URLs, I wanted something a little bit easier to read: namely, to display the title of each blog post, alongside a nicely-formatted date and the summary of that post. That’s where that extra little pinch of JavaScript comes in: it searches for blog entry URLs in the service worker cache, then looks up the metadata for those URLs in a JSON file, and then prints out a nice-looking link on the offline page. So as you browse through my archives, you’ll save new entries for offline access—which then get shown on the offline page itself.

This is all very preliminary, mind. But it feels good to have gotten started on making my site work offline. I’m still learning the contours of what I can do here—but thanks to a metric ton of resources, and the work of some good friends, I feel like I’m slowly getting my feet under me.

Current page