At Your Service: The Next Generation of Offline Websites

Erik Runyon
Technical Director, University of Notre Dame

Time is valuable. Tension of waiting is palpable. There are lots of things that raise our stress levels…things like standing in line, watching a horror movie…and waiting for web pages to load. In fact, the heart rate of your visitors increases 38% while waiting for a web page. And the longer the delay, the more the blame gets shifted to the developer.

We can’t do anything about people’s addiction to mobile phones, and their expectations — even when they’re offline. But we can use service workers to help. Service workers are like proxies between the browser and the server. They can do work, even when your website visitor has no internet connection.

Safari is the only major modern browser that doesn’t yet support service workers, but they are paying attention and getting involved, so stay tuned. Also, service workers require https. If your server isn’t automatically redirecting to https, it should be!

A service worker is a JavaScript file that sits on your server, and gets cached on a visitor’s device, in order to do help make subsequent visits to your site a more pleasant and usable experience.

A service worker has control only over its current scope, so you should make sure you put your service worker in the root of your server, so the whole server is in the scope of your JavaScript. Also, service workers use promises — a way to make deferred requests. Read up and understand promises before you get too far into service workers.

Why use a service worker?
They really increase speed, and improve users’ experience, especially when the network is sketchy, or unavailable.

How does a service worker work?
Instead of your browser connecting directly to the network, it first looks to a cache on your device. Service worker gets installed on first load, but on subsequent loads, requests go to the cached service worker first, not directly to the network.

Service worker life cycle:
Load the service worker, and then event listeners, such as install, activate, and fetch.
Fetch happens for every request.
Kittens are adorable. Nicholas Cage is also adorable. You get to see them, whether you’re offline or online!

Some popular workflows:
Store theme files and important files in the cache for offline use.
Cache images as the user browses the site.
If a page is not yet cached, and is unavailable, you can show a custom “offline” page, and some pre-loaded content.
Fill out a form while connected to the network, submit, and the response is stored in the cache. Then when you go online, the form data is submitted.
Service workers can do push notifications (if the user approves them), but as a best practice, don’t ask the user until they’ve interacted with your site for a while, and are invested.
Service workers can do geofencing. (Send push notifications based on location.)
React to a particular date and time with some sort of action.

Mozilla’s Serviceworker cookbook has great examples, and Chrome has great developer tools to build service workers.

Find a reason to play with service workers. They are just another example of progressive enhancement. Devices that can benefit now will, as more are added, it will automatically work.