The Magic Behind Service Workers
Learning how to read the Specifications for Service Workers to improve your knowledge of PWAs
Service Workers… One of the Web Wonders of the 21st century, if there was such a list. So what exactly do they do?
Service workers provide a technical foundation for functionality that would normally require a native-app. These functionalities include rich offline experiences, periodic background syncs and push notifications. We can combine them to create rich Progressive Web App (PWA) experiences.
This article will take a look at the Service Worker Specification managed by the World Wide Web (w3c) consortium.
What is a specification you ask?
A Specification is a detailed description of the design and materials used to make something. ~ Oxford Dictionary
It’s also the source of all the articles and tutorials about Service Workers. Learning to read the specifications, even a little, will send your knowledge flying as high as the mountain that Gandalf was fighting Balrog on.
Let’s get Specific!
Specification Website
The first thing you see when you enter the specification website for Service Workers is a lot of text. And I mean A LOT.
But don’t run away! It’s actually not that scary, really. Here’s a breakdown!
Service Worker Specification Page Breakdown
On the left side, you can see a simple “Table of Contents”. This is just a menu for all the information that’s on this page. If you know what you’re looking for you can just jump ahead to that section.
I guess I don’t have to explain how the menus work any further. Let’s look at the right side, it’s way more interesting… all of the information we need is there!
We can see the date of when the draft was released or updated and we have links to the previous version and editor’s draft. We won’t be needing those for now.
The two things that are most useful here are the list of editors who are working on the specification and a link to the GitHub page where you can learn more about issues, bugs or even ask questions to the editors (which you can also do, through the emails that are available on the page).
The Why’s of Service Workers
Why do they exist? ~ Probably Abraham Lincoln
You can look for the answers to this question in a lot of blog posts, but people rarely seek this information from the source. The first chapter of the specification is entitled Motivations, and it thoroughly explains why Service Workers were created. This is obviously our most reliable source for information about Service workers and their place in the whole PWA eco-system.
The gist of the motivation for creating Service Workers is that the previous solutions for allowing Progressive Web Apps to function similar to native-apps weren’t flexible enough, and had unrecoverable errors.
Now that we understand the reason for creating Service Workers, let’s take a look at specific sections of the text, and see what we can learn from them.
Analysing the Contents
When you read the text, it may seem a bit complicated, but hey, so is life, and yet you made it this far! Here are three examples of sections from the specifications to get you started.
Section 4.1.2 — registration
As we can see from the image above:
The registration attribute must return the ServiceWorkerRegistrationThis statement explains what the function actually returns. And to go deeper, just press the ServiceWorkerRegistration link and you will see an interface of how this object looks!
If you have trouble understanding what’s written above, fear not! There is a w3c specification for WebIDL language. It’s actually not that hard, and if you understand English, and a bit of programming, you’ll quickly get the hang of it! You also don’t have to understand everything, especially at the beginning.
Section 4.1.3 — skipWaiting()
After reading this section, that describes the skipWaiting() method, we know that it does three things after it’s run;
- It creates a new
Promise - Runs three sub-steps
- Returns a promise that will be resolved with
undefinedvalue
All the methods and actions usually have references to a place that they’re documented in. You can think of it as a kind of Wikipedia, where you can start from reading about one thing and end up reading about something else entirely, because of the fact there are so many hyperlinks and references.
Section 6 — Security Considerations
If we’re installing our PWA on the user's device, we should consider the security of the code. The wizards behind Service Workers thought of it and documented Security Considerations in a separate chapter.
It sounds very technical, but thankfully, we can take a look at the green ‘Note’ at the bottom, because it simplifies all this text into an easy explanation. We have to host our Service Worker from a secure context (HTTPS, or localhost for development purposes). But, what is the definition of a Secure Context?
We can follow the hyperlink, and see that it redirects us to a whole new Secure Contexts Specification. After skimming through the page, we find out that it relates to transferring data over authenticated and encrypted channels (https), that are safer than the regular ones (http).
Voila, we’re already learning!
We can also read about their behaviour in different environments e.g. Framed Documents, Web Workers, Shared Workers and Service Workers.
“I do believe something very magical can happen when you read a good specification.”
― almost J.K. Rowling
Curiosity helps us evolve and advance in our field of expertise.
In Conclusion
By learning about Service Workers for PWAs from the source, there’s nothing stopping you from becoming an expert in the field. Even if you don’t understand everything, you will surely learn to better work with Service Workers.
Use this knowledge wisely. Don’t start with reading the specification from cover to cover when learning a new concept. First, do some reconnaissance by watching a quick video about it or reading a blog post. Peek into the specifications, read the introduction, and when you feel like you understand what you are working with, dig deeper!
Reading the specification was quite a fresh experience for myself. If you are a seasoned developer who has read a lot of different kinds of specifications, feel free to share your insight.
