How to Use a Firebase FCM Service Worker With Angular's NGSW Service Worker

The ServiceWorkerModule introduced in Angular v5 does a great job of simplifying the steps to build a Progressive Web App - however, it does make it more difficult to combine multiple workers into a single app. Only one worker can be installed per application scope (which is usually the root of the app). The is a common issue for those implementing Firebase Cloud Messaging (FCM) on the web. So how do we make use of both workers simultaneously?

Step-by-Step Guide Angular 6+

Step 1 - Create an App with Angular’s Service Worker

Create a new Angular v6+ app with the service worker module.

ng new myWebApp
ng add @angular/pwa

Step 2 - Create a Firebase FCM Worker

Create a new file named fcm.js and add your Firebase worker code by following the official web docs. It should look something like this:

importScripts('www.gstatic.com/firebasejs/<insert-version-here>/firebase-app.js');
importScripts('www.gstatic.com/firebasejs/<insert-version-here>/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': 'your-sender-id'
});

const messaging = firebase.messaging();

Step 3 - Update the App Module

Register the combined worker in the app.module.ts

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

Step 4 - Write an NPM Script to Concat the Workers

Our FCM worker is done, but the NGSW worker is not generated until we run the production build.

npm i concat --save-dev
ng build --prod

Now create a new npm script in package.json to concat the files together.

"scripts": {
  "fcm": "concat dist/your-app/ngsw-worker.js fcm.js -o dist/your-app/combined-worker.js"
}

Run it:

npm run fcm

You should see the combined worker in the dist folder and registered on chrome dev tools when serving the contents of the dist folder.

Alternate Angular 5 Version

Because Angular’s service worker is designed to be used as a standalone tool, we need to combine it with the Firebase worker code. This can be accomplished with a few simple steps.

Step 1 - Create an App with Angular’s Service Worker

Create a new Angular v5+ app with the service worker module.

ng new myWebApp --serviceWorker

Step 2 - Create a Firebase FCM Worker

Create a new file named src/firebase-messaging-sw.js

importScripts('www.gstatic.com/firebasejs/<insert-version-here>/firebase-app.js');
importScripts('www.gstatic.com/firebasejs/<insert-version-here>/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': 'your-sender-id'
});

const messaging = firebase.messaging();

Step 3 - Create a Custom Worker

importScripts('ngsw-worker.js');
importScripts('firebase-messaging-sw.js');

Step 4 - Update the App Module

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

Step 5 - Update the CLI Config

Tell the Angular CLI to include your worker files in the production build in angular-cli-json

"assets": [
  "assets",
  "favicon.ico",
  "manifest.json",
  "combined-worker.js",
  "firebase-messaging-sw.js"
]

Step 6 - Build the App

Now make sure it works. Build your production app and serve the contents of the dist folder. You should see the comibined worker is registered by going into the application tab on chrome dev tools.

ng build --prod && http-server ./dist