Question

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

Answer 1

您可以订阅应用中的消息：

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

Answer 2

从 Angular8 开始，我找到了一种使用 worker-plugin 来编译自定义ServiceWorker代码的方法：

先决条件：

Angular8
启用Angular中的Service Worker（“ serviceWorker”：true 等）
在Angular中启用WebWorkers（“ webWorkerTsConfig”：“ src / tsconfig.workers.json” ）

请参阅：Angular: Using TypeScript for Service Worker (ServiceWorkerModule)

Answer 3

您只需要创建自己的服务工作者文件即可。

首先，让我们开始创建自己的基本服务工作者。

//my-service-worker.js

self.addEventListener('notificationclick', (event) => {
  console.log('notification clicked!')
});

太好了，现在在您的“应用”模块中更改服务工作者注册

//app.module.ts

ServiceWorkerModule.register('my-service-worker.js', { enabled: environment.production })

您还需要将您的服务工作者添加到angular.json文件中的资产中

//angular.json

  "assets": {
  ...,
  "src/my-service-worker.js"
}

太棒了！现在，你都设置，但我们只是失去了所有的角服务人员提供的东西！等等，我们还没有完成。返回您的自定义服务人员并进行更改

//my-service-worker.js

importScripts('./ngsw-worker.js');
self.addEventListener('notificationclick', (event) => {
  console.log('notification clicked!')
});

好的！现在，我们可以正常工作了，可以接受推送通知的cli，还可以将自己的绒毛添加到通知事件中！

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

如何向Angular cli生成的服务工作者添加自定义代码

3 个答案: