Service Worker Lifecycle Explained
Explaining the lifecycle of Service Workers in PWAs and how to update them as fast as possible
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.
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.
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!