Question

在我的网络应用程序中（使用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 （其目的是缓存静态资源）实现为service-worker.js。请参阅https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers
Firebase Messaging Service Worker （其目的是处理网络推送通知），实施为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。对我来说，这个只能在构建过程之后生成。

Answer 2

swprecache模块API的SWPrecacheWebpackPlugin包装器有一个名为＆＃34; importScripts＆＃34;的选项。这可以用来导入例如＆＃34; firebase-messaging-sw.js＆＃34;在这种情况下。

Answer 3

只需将编译器现在需要的文件添加到 angular.json。

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

归功于 https://medium.com/mighty-ghost-hack/angular-8-firebase-cloud-messaging-push-notifications-cc80d9b36f82

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

3 个答案: