javascript - Angular Service worker with FCM push notification - Stack Overflow

admin管理员组

文章数量:1328031

In my web app(using Angular4) I am using "@angular/service-worker": "^1.0.0-beta.16" for generating service worker and also using firebase-messaging-sw.js for FCM push notification, angular/service-worker creates worker-basic.min.js only in production build. Now, how to use these 2 service-workers together??

In my web app(using Angular4) I am using "@angular/service-worker": "^1.0.0-beta.16" for generating service worker and also using firebase-messaging-sw.js for FCM push notification, angular/service-worker creates worker-basic.min.js only in production build. Now, how to use these 2 service-workers together??

• javascript
• angular
• typescript
• firebase
• progressive-web-apps

Share Improve this question Follow edited Sep 8, 2017 at 13:10 Debu asked Sep 1, 2017 at 8:34 DebuDebu 61588 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I can respond about using simultaneously :

• sw-precache Service Worker (whose aim is to cache static ressources) implemented as service-worker.js. See https://coryrylan./blog/fast-offline-angular-apps-with-service-workers

• Firebase Messaging Service Worker (whose aim is to handle web push notifications) implemented as firebase-messaging-sw.js.

1. Development: in src directory:

• I create an empty file named service-worker.js. The real one will be generated after the build process but this file has to exist (even empty) to avoid error message while serving with ng serve.
• I create a file named firebase-messaging-sw.js whose content is: (add https:// before both www, stakoverflow limits me in number of links!)
  
  importScripts('www.gstatic./firebasejs/3.9.0/firebase-app.js'); importScripts('www.gstatic./firebasejs/3.9.0/firebase-messaging.js'); firebase.initializeApp({ 'messagingSenderId': 'xxxxxxxxxxxx' // replace by yours! }); const messaging = firebase.messaging();
• I create a file named global-sw.js. This is THE Service Worker you have to register in index.html (ask me how if needed). Content of global-sw.js is:
  
  importScripts('service-worker.js'); importScripts('firebase-messaging-sw.js');

2. Update of .angular-cli.json: To have those files included in my future dist directory (generated with the production build process), I update .angular-cli.json this way : .angular-cli.json - extract

3. Production build: I run ng build -prod then I generate service-worker.js. For me, this one can only be generated after the build process.

Just add to angular.json the file you want the piler to know about.

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/firebase-messaging-sw.js", // add this one
    "src/manifest.json" // this one also 
]

Credits to https://medium./mighty-ghost-hack/angular-8-firebase-cloud-messaging-push-notifications-cc80d9b36f82

The SWPrecacheWebpackPlugin wrapper for the swprecache module's API has an option called "importScripts" which can be used to import for example "firebase-messaging-sw.js" in this case.

本文标签： javascriptAngular Service worker with FCM push notificationStack Overflow