Service Worker Lifecycle Explained

Explaining the lifecycle of Service Workers in PWAs and how to update them as fast as possible

Hey!

This is my first post on this platform since I moved my subscribers from Mailchimp. Things won’t change too much for you, you’ll still get my emails delivered to your inbox, but this time all posts will have a home at Substack.

Service Worker Lifecycle And Updates Explained

Since last time, I was working on a new post about the Service Worker lifecycle. There are a lot of resources out there but none of them made me understand the full picture of the lifecycle and update mechanisms of Service Workers. I was really confused about the difference between skipWaiting and clients.claim, active Service Workers and Service Workers that are controlling the page, and how I can update my PWA as fast as possible.

Some of the things only became clear to me while writing this article. I hope this helps you too to get a better understanding of Service Worker. If after reading it you still have things that are unclear, feel free to ask questions in the comments.

Read it here.


Service Worker Sandbox Code on Github

I used this to play around a bit with the lifecycle functions. I modified the express server to change the version variable value inside the service-worker.js file on every GET request. While this is something you would never do in production, for the sandbox that means there’s always a new Service Worker version available.

I also added buttons for the skipWaiting, clients.claim and update functions to make life a little easier for me.


A while ago I wrote an article that explains every step you need to take in order to make your React app a PWA, using Workbox and Webpack.

It took me a whole month to write it and I tried to cover everything you need to know.

I start by explaining the most important concepts around this topic, so if you want to get into PWAs I recommend you check it out here.


Thanks for reading and have a nice week!

Felix