Making Service Workers easy!
Service workers are an essential part of Progressive Web Apps and enable some amazing experiences on the web, but historically they have been complicated and hard to work with. There are plenty of edge cases that you need to think of when putting together a service worker and when your service worker goes wrong, they tend to go really wrong 😁. Luckily, as the web has progressed solutions such as Workbox have come out that handle the edge cases and make it much easier to build a great service worker for your PWA. Today the PWABuilder team is happy to announce that we have updated all of our service workers to use Workbox AND we are releasing a new web component, <pwa-update /> that handles service worker registration, service worker updates and more! This means that our service workers are now much easier to use, way more powerful and customizable than before, along with being fully production ready. Let’s dive into the details!
What is Workbox?
Before we dive into the details of this update, lets first talk about what Workbox is!
Workbox is a JavaScript library that wraps the Service Worker APIs and makes them super easy to build. For example, let’s say we want to cache all the assets in our PWA so that they load when your PWA is opened offline. While this sounds simple at first once you dive in you start to realize its not. For example, do we always want to get the assets from our cache? What if we want to try the network first and fall back to cache? How does this even work? As you can see, this gets complicated quick, but this is where Workbox comes to the rescue! With Workbox, this is what the code looks like to cache our ‘assets’ folder and keep that cache updated:
While this is just one example, Workbox comes with many different caching strategies, and different ways of handling paths and even modules that help you take advantage of more advanced service worker API such as background sync. Check out https://developers.google.com/web/tools/workbox for more info!
Our new Service Workers!
Let’s now dive into our new Workbox based service workers! Once you have entered your URL into https://pwabuilder.com you can then proceed to our new service workers by tapping “Choose a Service Worker”. As you can see, this works the same as it always has, but the service worker code now uses Workbox!
Another change you might notice is that we now have added two new Service Workers; one that takes advantage of background sync and another one for serving cached video and audio! These scenarios have been complicated to set up with our Service Workers in the past, but now all you need to do is just copy/paste some code!
The pwa-update component!
Another factor that has made Service Workers hard to use properly in the past was that there was no default way to notify the user of available updates and offline functionality. Luckily, these are exactly the scenarios that the <pwa-update /> web component was made to handle!
As you might notice from the above screenshots, our registration code snippits for the service workers now import our web component and add it to your app. This is all you need to register your service worker and handle the scenarios I mentioned above! When your service worker has successfully installed the offline toast will be shown, and when an update is available the update toast will show.
Finally, we know that many modern frameworks and libraries provide their own Service Workers or might already use Workbox underneath the hood. Because of this, we made sure that <pwa-update /> can work with any service worker! All you have to do is make sure you update the `swpath` https://github.com/pwa-builder/pwa-update#api to point at your Service Worker and add this bit of code to your Service Worker.
We hope you enjoy our new Service Workers and the <pwa-update /> web component. We have been excited to collaborate with the Workbox team on this update and are excited for you to try it! Also, as always, if you have any feedback or run into any issues always feel free to open a ticket with us on our Github Repo . Thanks!
