How to edit your service worker file for an Angular CLI project

Question

I have added the @angular/pwa package to my Angular CLI project with the command ng add @angular/pwa --project *project-name* so it becomes a progressive web applicaiton, and this adds a service worker I know. I want to edit that default service worker to support e.g. handling Shared Targets links. I see that the service worker is registered to a file calleded ngsw-worker.js using the "Inspect" option in Google Chrome. How can I edit that service worker (ngsw-worker.js) created by the Angular CLI when compiled with ng build --prod? What is the best way?

Answer 1

This is a good question, don't know way it's so downvoted. As explained here the best way to accomplish this is to extends the original service worker with your own:

importScripts('./ngsw-worker.js');

// my new features
self.addEventListener('notificationclick', (event) => {
  console.log('notification clicked!')
});

then add the new one to angular.json assets array:

"assets": {
  ...,
  "src/my-service-worker.js"
}

then replace the sw file in app.module:

//app.module.ts
ServiceWorkerModule.register('my-service-worker.js', { enabled: environment.production 
})

Clean and easy.