Building a Service Worker with Workbox 5, TypeScript, Webpack and Angular

Why?

Progressive Web Apps get a lot of attention since 2017, and for a good reason. There are many benefits for end users and now that we’re in 2020, it would be a mistake to disregard those benefits.

For our upcoming product, we’re aiming to provide our end users with first-class support for offline use. Offline-first is often used to qualify sub-par offline experiences. For instance, caching whatever data you already consulted for offline use might be sufficient for some cases, but won’t allow your users to access data that they did not consult before going offline. It all depends on the application needs, but in our case this isn’t enough.

What we want is to offer users going offline a way to do 90+% of what they can do while being online. To reach this goal, we need to tackle some pretty complex problems.

In this post, I’ll concentrate on one of the first building blocks that we’ve integrated into our Angular application: a service worker. The goal here is not to present all the ideas around PWAs and service workers as there’s already a ton of content all around the place about this.

Here, I’ll explain how the service worker itself is built. I won’t be explaining how the service worker is integrated into the Angular app; I’ll leave that for a later post. If you can’t wait for that part, then do take a look at Sam Vloeberghs’s blog…