Customise @angular/service-worker

Question

How to customize @angular/service-worker? I know it is not an appropriate way to modify inside the npm_modules folder. I've come across a tutorial, where the author creating an additional of 2 js files. One of the files contains service worker code whereas the other contains 'importScripts()' to import both the ngsw-worker.js file and the custom service worker file. It works fine, the custom service worker listening for the install event but when it comes to fetch event, it is not passing through this fetch event listener. Am not getting the console inside this function. I don't know why it happens in that way. Anyone know the reason or any other solution to achieve this?

Here is the link of the tutorial which I've follow, Tutorial

Answer 1

This answer can be a bit late but maybe it still be useful. Instead of modifying the Service Worker (SW) that is generated by angular, you can leave it to handle everything related to caching and offline support (which is present out of the box) and create a new service worker to handle the other tasks you need. Here you have a very good example where a second service worked is created to handle Push Notifications: Push Notifications using firestore.

You can use this example and create your own SW.

Hope it helps ;)