admin管理员组文章数量:1320661
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??
3 Answers
Reset to default 6I 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-workersFirebase 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 withng serve
. - I create a file named
firebase-messaging-sw.js
whose content is: (addhttps://
before bothwww
, 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 inindex.html
(ask me how if needed). Content ofglobal-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
版权声明:本文标题:javascript - Angular Service worker with FCM push notification - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742063890a2418715.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论