Search code examples
angularworkbox

How do I add Google's Workbox to an Angular project?


I'm trying to utilize Google's Workbox in my project but there are no current tutorials or guides on the steps to get workbox working with a new angular project. Does anyone have any insight or resources on how this sort of thing is done since angular uses typescript instead of straight js? For example, does the workbox wizard work with an angular project or do I need to do anything special?


Solution

  • You have many ways to use Workbox in your Angular project

    If you use webpack, you could generate easily a service worker with the workbox-webpack-plugin, all the stuff on how to use it is detailed here. You can use the GenerateSW to generate a full working service worker, runtime caching, etc. There is also the InjectManifest plugin to create a precache manifest and inject it inside your own service worker.

    Btw if you'd rather write your own than use the plugins, you are still able to write your service worker with straight js in your Angular project, and use the Angular ServiceWorkerModule to register it to your app with the register() function (this should be done inside the imports array of your main Angular module). You also need to import the workbox library into your service worker with importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.2/workbox-sw.js');

    I have never used the workbox wizard so I cannot tell you more about it but the above should do the trick.