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?

@Doug Stevenson Why do you want me to close this? Is it not relevant knowledge for a beginner? E.g. if you want to handle shared targets for your app (could not find much about it for angular) https://wicg.github.io/web-share-target/ — ravo10, Oct 16 '19 at 13:29
I didn't vote on anything. I just removed the firebase tag because this question doesn't seem to be about Firebase at all. — Doug Stevenson, Oct 16 '19 at 13:32
I know you can handle requests differently than using a service worker. But in general if you need to edit the service worker. — ravo10, Oct 16 '19 at 13:35
@Doug Stevenson Oh, OK sorry. My fault. I don't understand why someone downvotes the posts lol. Is it that bad of a question? I saw allot of people asking it around the internet without any good answers. Well, one other persons opinion for now I guess. — ravo10, Oct 16 '19 at 13:38
I will say it is a rather confusing question (at least for those of us who aren't familiar with angular). Consider editing the question to explain in more detail what the problem is that the answer is trying to solve. — Doug Stevenson, Oct 16 '19 at 13:45

score 7 · Answer 1 · answered Sep 20 '20 at 10:57

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.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Get the current Service Worker:

There are two ways you could do this. Get the ngsw-worker.js from the node_modules folder, or get it in your output folder after building your app with ng build --prod.
Copy the contents of the ngsw-worker.js into a new JavaScript file under e.g.: *MyProject*/src/service-worker.js.

Make Angular CLI include your file on compilation:

Go into *MyProject*/src/angular.json. Search for the "assets" key. There should be two. At the bottom of the array for each key, add your custom service worker file; e.g.: src/service-worker.js so angular will include it.

Edit the Service Worker:

Now you can edit your custom service worker file as you want. E.g.: add self.addEventLister('fetch', event => { ... }) at the top. That code adds a new event (it could be several of the same), so it won't overwrite anything... It could interfere with something else tho from the copied content of ngsw-worker.js.

Final Step - Add the Service Worker:

First build your app with ng build --prod.
Now locate the location of the output folder ("outputPath" in angular.json). In this example, it will be "../public".
Open a terminal to edit the file. I like to use VS Code; there is a terminal in there relative to my project folder installed through an extension.
Overwrite with your file with this command: cp public/service-worker.js public/ngsw-worker.js.

Thats it!

Documents to learn more:

Automatic Progressive Web Apps

Note: You should consider using the finished service worker given to you by @angular/service-worker, with your custom code on top, which will be installed automatically when adding @angular/pwa to your project and compiled with ng build --prod.