具有FCM推送通知的Angular Service工作者

Question

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

Answer 1

我可以同时回复:

• sw-precache服务工作者 (其目的是缓存静态资源)实现为service-worker.js.请参阅https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

• Firebase消息传递服务工作者(其目的是处理Web推送通知)实现为firebase-messaging-sw.js.

1.开发:在src目录中:

• 我创建了一个名为的空文件service-worker.js.真实的将在构建过程之后生成,但此文件必须存在(甚至为空)以避免在使用时出现错误消息ng serve.
• 我创建了一个名为firebase-messaging-sw.js其内容的文件:( https://在两者之前添加www,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.这是您必须注册的服务工作者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.对我来说,这个只能在构建过程之后生成.