I'd been hearing about service workers for a while, and was keen to try and add to my site. Also I was really struggling with some FOUT issues on my site, and service workers were part of one recommended solution. I think I've got things working OK, but no doubt there's still room for improvement.
There are two main benefits of using a service worker on your website. Firstly, it allows you to improve your visitors' offline experience (by allowing access to content that has already been downloaded, or a showing a specific "offline page", when a user can't connect). Secondly, it can enhance a user's online experience by allowing content to load faster (by serving files from a local cache rather than the network).
Most importantly, it can still do this even when a user is offline.
In practice, at least on my site, this means that resources that don't change very often (i.e. fonts and images) should be served from the browser cache when they can. They are most likely unchanged from any previous visits and this reduces network requests and improves performance. You can always "reset" a service worker and force the browser to re-download everything if you change any of these files.
For other file types, I would prefer the browser to fetch them from the network (just as if there wasn't a service worker in place). Unless, and here's the good part, the user is offline. If that's the case I would like the files served from the cache. This allows a visitor to access these pages while they are offline. You can also show an "offline page" to visitors if they request a page that hasn't been cached.
There are a few steps in getting a service worker up and running on your site, but with a good guide this should be no problem. There's some really good guides out there already, so rather than trying to do a better job than them, I'll point you to some resources I found really useful in going from knowing nothing about service workers to getting one up and running and doing its stuff on my personal site.
I hate this part of these kind of posts when someone points me to a 50 minute long YouTube video that I don't have time to watch. ("Just tell me what I need to know, I don't have time for this I hear you shout!") But, I am going to strongly suggest that you watch this talk by Jeremy Keith because it is really, really good. It's clear, concise and explains the logic of the process wonderfully, and the code too.
The logic is more important than the code.
— Jeremy Keith, Going Offline
Then, for a really nice walk through of the process, some very handy code snippets, and a nice boiler plate to get you started at the end, this CSS Tricks article by Chris Ferdinandi is an excellent place to continue on to. If you like his approach, I can also highly recommend his Service Worker Pocket Guide. This guide provides a more detailed explanation of the steps involved, with short instructional videos, starter code for each stage, and a boilerplate to get you started at the end.
Both Chrome based browsers and Firefox have a great tab for dealing with service workers in their dev tools under the application tab. This allows you to test the offline experience, refresh the service worker, and totally unregister the file to start over as if visiting the site for the first time. You can also view and delete files from the caches you are using under the same tab. I spent quite a bit of time here.
Lastly, don't forget to go revert the offline setting in your dev tools when you are done testing. This sounds daft, but, more than once, I forgot that I was offline when I was testing my site. This caused git errors (the horror!), and all kinds of confusion. I'm just not used to testing offline, so making sure that I'm online wasn't part of my mental model for working in the browser. If you get a strange error check this first!
To make things "worse" (or is this better?), having a service worker returning webpages that work offline made it less immediately obvious to me that I was offline (normally I'd notice pretty quickly when checking my work!). Once the service worker was installed I could go on reviewing pages on my site for quite a while before I realized that I was still offline. Which, I guess, is kind of the point.
This post first appeared on dwhenson.com.