Working with Service Workers

302

Application Cache sucks they said. Service Workers are the future they said. Use them. Use. Them. So I did.

My notes after a couple of days:

Day One

HTTPS only

Service workers could be used for great evil so to combat potential nsa-in-the-middle attacks, they only work over HTTPS connections. http://localhost is an exception but only animals use localhost for internal development so self-signed SSL certs are a thing.

Location dictates scope

By default, the service worker location dictates the scope of content it can control. There is an optional scope registration parameter but this cannot point above the service worker location without the server sending a Service-Worker-Allowed header allowing this. This means to do this:

navigator.serviceWorker.register('/js/v3/worker-min.js', { scope: '/' })

The server needs to send a Service-Worker-Allowed header with value / otherwise Chrome and Opera will fill the console with angry red. Annoyingly, Firefox silently fails.

Debugging

In Chrome and Opera, along with Developer Tools Sources and Resources tabs, chrome://serviceworker-internals/ is your friend, in Firefox, about:serviceworkers and about:debugging#workers are That Guy.

When debugging in Chrome or Opera, forcing update on page load via the debug panel saves a lot of grief:

Service worker in Chrome debug panel
Force update on page load

Ready doesn’t mean ready

You’d think the ready promise would fire when the worker’s controller was ready so you could start talking to it via navigator.serviceWorker.controller.postMessage but you’d be wrong.

Service workers and application cache don’t mix

As service workers are only supported by Chrome, Firefox and Opera, you might want to keep application cache around for Edge and Safari support.

While Firefox is nice and ignores application cache if a service worker is installed, Chrome and Opera still kind of support it by continuing to listen to window.applicationCache events but then throwing an error on window.applicationCache.swapCache. You can track this bug here.

Day Two

It’s a spectacular spring day in Tokyo so relocate to the terrace with a bottle of Sauvignon Blanc.