在我的网络应用程序（使用 Angular4）中，我使用 "@angular/service-worker": "^1.0.0-beta.16" 生成服务工作者，还使用 firebase-messaging-sw.js 进行 FCM 推送通知，angular/service-worker 仅在生产构建中创建 worker-basic.min.js。现在，如何一起使用这 2 个 service-worker？？
【问题讨论】：
标签： javascript angular typescript firebase progressive-web-apps
只需将您希望编译器知道的文件添加到 angular.json。
"assets": [
"src/favicon.ico",
"src/assets",
"src/firebase-messaging-sw.js", // add this one
"src/manifest.json" // this one also
]
【讨论】：
swprecache 模块 API 的 SWPrecacheWebpackPlugin 包装器有一个名为“importScripts”的选项，在这种情况下可用于导入例如“firebase-messaging-sw.js”。
【讨论】：
我可以回应一下同时使用：
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 的文件，其内容为：（在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 的文件。这是你的服务工作者
必须在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。对我来说，这个只能在构建过程之后生成。
【讨论】：
srcdirectory 中，service-worker.js 为空只是为了避免在开发过程中控制台中出现错误消息。但是在构建时间之后，它实际上是在dist 文件夹中生成的（参见我的步骤#3）。无论如何，它无法在其他时间生成，因为它在其他文件中引用了您的包（在构建时制作）。