Overriding the @angular/pwa ngsw-worker.js

Question

I'm working on an app and I would like to integrate with Firebase Messaging. To do so I need to append some code to the ngsw-worker.js generated by @angular/pwa when I build.

I tried creating a ngsw-worker.js in src/ , but after running rm -rf dist/ && ng build --prod , the version in dist/ didn't have my changes.

Answer 1

You can do like this

First you need to run

ng build --prod 

So you can copy the file ngsw-worker.js from dist folder in the root of your project (same level with package.json) From here you can modify that file with the content you want.

Next create a file name replace-sw.sh and paste this content into that file

#!/bin/bash
cp ./ngsw-worker.js ./dist/

Finally update your package.json

"build": "ng build --prod && replace-sw.sh"

Then you can simply run npm run build

Answer 2

When the service worker module is imported into app.module.ts , it includes the path of the worker.

ServiceWorkerModule.register(
  '/ngsw-worker.js',
  { enabled: environment.production }
)

Change that path to something else, then in that file importScripts('/ngsw-worker.js) . Also include it in the assets section of angular.json so it will get copied to production.