带有FCM推送通知的Angular Service工作人员 [英] Angular Service worker with FCM push notification

问题描述

在我的Web应用程序中(使用Angular4)，我正在使用"@ angular/service-worker":"^ 1.0.0-beta.16" 来生成服务工作者，并且还使用了用于FCM推送通知的firebase-messaging-sw.js ，angular/service-worker仅在生产版本中创建 worker-basic.min.js .现在，如何一起使用这两个服务工作者?

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??

推荐答案

我可以回答有关同时使用的问题:

I can respond about using simultaneously :

• sw-precache Service Worker (其目的是缓存静态资源)，实现为 service-worker.js .参见 https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

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

Firebase Messaging Service Worker (其目的是处理Web推送通知)，实现为 firebase-messaging-sw.js .

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

1.开发:在 src 目录中:

• 我创建一个名为 service-worker.js 的空文件.真正的文件将在构建过程之后生成，但是此文件必须存在(甚至为空)，以免在使用 ng serve 进行服务时出现错误消息.
• 我创建了一个名为 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'//用您的替换！});const messages = firebase.messaging();
• 我创建一个名为 global-sw.js 的文件.这是您的服务人员必须在 index.html 中进行注册(如果需要，请问我如何). global-sw.js 的内容是:
  
  importScripts('service-worker.js');importScripts('firebase-messaging-sw.js');

• 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.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();
• 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..angular-cli.json的更新::要使这些文件包含在我将来的 dist 目录(由生产构建过程生成)中，请更新 .angular-cli.json这样: .angular-cli.json-提取

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.生产版本:我运行 ng build -prod ，然后生成 service-worker.js .对我来说，这只能在构建过程之后生成.

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.

这篇关于带有FCM推送通知的Angular Service工作人员的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！