如何将自定义代码添加到Angular CLI生成的服务工作者

Question

我可以生成并配置由angular cli生成的服务工作者（通过配置文件）而不会出现问题。但是，似乎没有关于如何添加自定义代码ngsw-worker.js的文档，因为我想添加诸如推送通知，发布消息等功能。想插入ngsw-worker.js

Answer 1

您只需要创建自己的 Service Worker 文件。

\n\n

首先，让我们从创建我们自己的非常基本的 Service Worker 开始。

\n\n

//my-service-worker.js\n\nself.addEventListener(\'notificationclick\', (event) => {\n  console.log(\'notification clicked!\')\n});\n

\n\n

太棒了，现在在您的应用程序模块中更改服务工作者注册

\n\n

//app.module.ts\n\nServiceWorkerModule.register(\'my-service-worker.js\', { enabled: environment.production })\n

\n\n

您还需要将 Service Worker 添加到 angular.json 文件中的资产中

\n\n

//angular.json\n\n  "assets": {\n  ...,\n  "src/my-service-worker.js"\n}\n

\n\n

伟大的！现在一切都准备好了，但我们刚刚丢失了 Angular Service Worker 提供的所有内容！等一下，我们\xe2\x80\x99 还没有完成。返回到您的自定义 Service Worker 并进行更改

\n\n

//my-service-worker.js\n\nimportScripts(\'./ngsw-worker.js\');\nself.addEventListener(\'notificationclick\', (event) => {\n  console.log(\'notification clicked!\')\n});\n

\n\n

好的！现在我们一切正常，Angular cli 接受推送通知，我们可以向通知事件添加我们自己的内容！

\n\n

https://medium.com/@smarth55/extending-the-angular-cli-service-worker-44bfc205894c

\n

Answer 2

您可以在应用程序中订阅消息：

import { SwPush } from '@angular/service-worker';

this.SwPush.messages.subscribe(message => {
    console.log('[App] Push message received', message)
}

查看这篇文章： https://medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1