Simple Guide to Workbox in Angular
Simple yet powerful Service Worker for Angular
Updated to work with latest versions on 25/11/22
Service Workers provide an excellent way to provide better offline capabilities for Web Apps.
While Angular provides its own Service Worker capability, it comes as a take-it or leave-it option.
If you want a more powerful and configurable solution, integrating Workbox and Angular is a good option.
Background
There are some good sources available both for WHY you might want to integrate Workbox and Angular and HOW to do it. I have included three sources in the Resources at the end of the article. All of these sources have contributed to the documented solution.
The TLDR: is that if you want more control over the service worker than is provided by the angular service worker, then Workbox provides a good way of doing this. Workbox is a service worker javascript library that also comes out of the Google stable. Workbox 5 is webpack/rollup and TS ready.
However, these sources all seem to emphasis the complexities of integrating the two (and since a powerful solution is the aim, there can be a lot of complexities). In this article, I want to create a simple recipe for the integration or Angular and Workbox.
