Angular Service Worker with FCM Push Notification

Question

In my web application (using Angular4) I use "@angular/service-worker": "^1.0.0-beta.16"to create a service worker, and also using firebase-messaging-sw.jsFCM for push notification, angular / service-worker creates worker-basic.min.jsonly in the production assembly. Now, how to use these two service workers together?

Answer 1

I can answer about using at the same time:

• An employee of the sw-precache service (whose purpose is to cache static resources), implemented as service-worker.js. See https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

• Firebase messenger (whose purpose is to process notifications via web pages) implemented as firebase-messaging-sw.js.

1. Development: in the catalog src:

• I am creating an empty file with the name service-worker.js. A real one will be created after the build process, but this file must exist (even empty) in order to avoid an error message while working with ng serve.
• I create a file with a name firebase-messaging-sw.jswhose contents are: (add https://before both www, stakoverflow limits me to the number of links!)
  
  importScripts('www.gstatic.com/firebasejs/3.9.0/firebase-app.js'); importScripts('www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js'); firebase.initializeApp({ 'messagingSenderId': 'xxxxxxxxxxxx' // replace by yours! }); const messaging = firebase.messaging();
• global-sw.js. , index.html ( , ). global-sw.js:
  
  importScripts('service-worker.js'); importScripts('firebase-messaging-sw.js');

2. .angular-cli.json: dist ( ), .angular-cli.json :  . angular-cli.json - extract

3. : ng build -prod, service-worker.js. .

Answer 2

SWPrecacheWebpackPlugin API swprecache "importScripts", , , "firebase-messaging-sw.js" .