Learn Service Workers NOW!

(Also with Game of Thrones references, yay!)

From the Google service worker docs

Service workers are great.

The serviceWorker API is a great piece of kit to start getting your head around.

We can use them to cache important files. We can use them to send push notifications. We can even use them to make your web app fully offline (or as fully as we have time and effort for).

But what even is a Service Worker? and where can I go to learn about these magical entities?

I hear you — and at one point me, — ask.

What a Service Worker Is

A Service Worker is just a JavaScript file containing some code (as JavaScript files are want to do).

It runs on a separate, background thread, so anything done within it won’t affect the main thread. Wonderful isn’t it!

In order to use a Service Worker, we have to register it within our application. We need to do this from our application’s entry point (which we might call index.js or main.js or whatever the hell we like):

// index.js
navigator.serviceWorker.register(‘sw.js’)

Here, we have called our Service Worker sw.js. But of course we could have named it arsehole.js for all the API cares.

One very important thing we must talk about here, however, is where the Service Workers lives.

The Dominion of the Service Worker

Service Workers are kind of like people in Game of Thrones — stick with me now.

People in GoT have some kind of position within their society. They may be at the top of the ladder, or lying the mud at the bottom, but they have some defined position.

Their position determines where they get to go and what they get to do.

If you’re a slave in Meereen, you can’t just waltz your way into the high chambers at the top of the Great Pyramid.

If you’re Daenerys, you certainly can go to the top of the Great Pyramid, but you can also go to the mid-town, markets, sewers — if you so choose, and anywhere from the top to the bottom of the city (although someone might not like you in either place).

Your position within, and ability to move through, society also determines the influence you have. Daenerys commands her armies, but a pauper may only command a small team of highly trained rats.

The same rules apply for Service Workers.

If a Service Worker lives at the top of the hierarchy — in the root of the project — it can control the goings-on of things right to the bottom.

However, if it lives somewhere in between, it can have influence downwards, but not upwards.

We call this the Service Worker’s scope.

To illustrate, let’s have a look at where two Service Workers might live.

www.example.com/sw.js

In this case, the Service Worker lives in the root of the project. Its scope is the entire application.

However, with this Service Worker:

www.example.com/some-folder/sw.js

It’s scope is /some-folder/. Therefore it only has access to code running within that folder and its child folders.

Using Service Workers

Now that we know a little bit about how Service Workers work…

…how can we use them?

I won’t go into any grand detail about that here, but what I will do is add a list of very useful resources which you can use to go off and learn about and implement these majestic beasts.

Service Worker Basics

These are some resources you can use to get started with the API:

Push Notifications

These will help you get started with web push notifications:

Progressive Web Apps

These resources will give you more info on PWAs in general:


That’s all folks!

Thanks for reading. If you have any suggestions for resources or good Service Worker/PWA info, add a comment down below and I’ll add it to the list.