带有 FCM 推送通知的 Angular 服务工作者

Posted 2023-03-13

【中文标题】带有 FCM 推送通知的 Angular 服务工作者

【英文标题】：Angular Service worker with FCM push notification

【发布时间】：2018-02-10 06:43:07

【问题描述】：

在我的网络应用程序（使用 Angular4）中，我使用 "@angular/service-worker": "^1.0.0-beta.16" 生成服务工作者，还使用 ​​firebase-messaging-sw.js 进行 FCM 推送通知，angular/service-worker 仅在生产构建中创建 worker-basic.min.js。现在，如何一起使用这 2 个 service-worker？？

【参考方案1】：

只需将您希望编译器知道的文件添加到 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

【参考方案2】：

swprecache 模块 API 的 SWPrecacheWebpackPlugin 包装器有一个名为“importScripts”的选项，在这种情况下可用于导入例如“firebase-messaging-sw.js”。

【参考方案3】：

我可以回应一下同时使用：

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。对我来说，这个只能在构建过程之后生成。

【讨论】：

我不确定创建一个空的 service-worker.js 是否是最好的解决方案，但它是迄今为止我唯一的解决方案.. 所以谢谢.. 另外创建一个会更好文件夹并将三个服务工作者脚本放在那里..你不觉得吗？还是服务人员必须从根服务？

在srcdirectory 中，service-worker.js 为空只是为了避免在开发过程中控制台中出现错误消息。但是在构建时间之后，它实际上是在dist 文件夹中生成的（参见我的步骤#3）。无论如何，它无法在其他时间生成，因为它在其他文件中引用了您的包（在构建时制作）。

是的，我明白了。我只是觉得有一个文件来消除错误很烦人。但它有效！。

不工作，运行 'ng build --prod' 这是我在 dist 文件夹中的 index.html ' ..... ........'

在 chrome 中运行时，在应用程序选项卡中仍显示 2 个服务人员