[英]Angular Service worker with FCM push notification
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.在我的网络应用程序(使用 Angular4)中,我使用
"@angular/service-worker": "^1.0.0-beta.16"
来生成服务工作者,并使用firebase-messaging-sw.js
进行 FCM 推送通知,angular /service-worker 仅在生产构建中创建worker-basic.min.js
。 Now, how to use these 2 service-workers together??现在,如何将这 2 个 service-worker 一起使用?
I can respond about using simultaneously : 我可以同时回复:
sw-precache Service Worker (whose aim is to cache static ressources) implemented as service-worker.js
. sw-precache服务工作者 (其目的是缓存静态资源)实现为
service-worker.js
。 See https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers 请参阅https://coryrylan.com/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
. Firebase消息传递服务工作者 (其目的是处理Web推送通知)实现为
firebase-messaging-sw.js
。
1. Development: in src
directory: 1.开发:在
src
目录中:
service-worker.js
. 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
. ng serve
出现错误消息。 firebase-messaging-sw.js
whose content is: (add https://
before both www
, stakoverflow limits me in number of links!) firebase-messaging-sw.js
的文件,其内容为:(在两个www
之前添加https://
,stakoverflow限制了我的链接数量!) 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
. global-sw.js
的文件。 This is THE Service Worker you have to register in index.html
(ask me how if needed). index.html
注册的服务工作者(如果需要,请问我如何)。 Content of global-sw.js
is: global-sw.js
内容是: 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 2.更新.angular-cli.json:为了将这些文件包含在我未来的
dist
目录中(使用生成构建过程生成),我.angular-cli.json
这种方式更新.angular-cli.json
: .angular-cli.json - extract
3. Production build: I run ng build -prod
then I generate service-worker.js
. 3.生产构建:我运行
ng build -prod
然后生成service-worker.js
。 For me, this one can only be generated after the build process. 对我来说,这个只能在构建过程之后生成。
swprecache模块API的SWPrecacheWebpackPlugin包装器有一个名为“importScripts”的选项,可用于导入例如“firebase-messaging-sw.js”。
Just add to angular.json the file you want whe compiler to now about.只需将编译器现在想要的文件添加到 angular.json 中。
"assets": [
"src/favicon.ico",
"src/assets",
"src/firebase-messaging-sw.js", // add this one
"src/manifest.json" // this one also
]
Credits to https://medium.com/mighty-ghost-hack/angular-8-firebase-cloud-messaging-push-notifications-cc80d9b36f82归功于https://medium.com/mighty-ghost-hack/angular-8-firebase-cloud-messaging-push-notifications-cc80d9b36f82
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.