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

【问题标题】：How to add custom code to Angular cli generated service worker如何将自定义代码添加到 Angular cli 生成的服务工作者
【发布时间】：2018-03-23 04:02:59
【问题描述】：

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

【问题讨论】：

标签： javascript angular angular-cli service-worker

【解决方案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

【讨论】：

我可以看到api暴露了方法，但是剩下的Service worker api呢。我们如何扩展这个包
似乎还没有支持所有功能：后台同步有一个开放的功能请求：github.com/angular/angular/issues/22145 postMessage 与您独立使用它的服务人员无关
@Stef Chäser：Hoi Stef，对这个类似问题的任何建议：stackoverflow.com/questions/51449020/…。如何以官方方式修改此文件 ngsw-worker.js（添加一些自定义代码）？是的，我可以添加一些花哨的构建步骤，在构建后将一些东西连接到这个文件中，但这感觉不对。

【解决方案2】：

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

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

//my-service-worker.js

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

太棒了，现在在您的 App 模块中更改 service worker 注册

//app.module.ts

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

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

//angular.json

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

太棒了！现在你已经准备好了，但是我们刚刚丢失了 Angular Service Worker 提供的所有东西！等等，我们还没有完成。返回到您的自定义服务人员并进行更改

//my-service-worker.js

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

好吧！现在我们一切正常，angular cli 接受推送通知，我们可以将自己的绒毛添加到通知事件中！

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

【讨论】：

这个方案的问题是它没有和webpack集成

【解决方案3】：

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

先决条件：

Angular8
在 Angular 中启用 Service Worker（"serviceWorker": true 等）
在 Angular 中启用 WebWorkers ("webWorkerTsConfig": "src/tsconfig.workers.json")

见：Angular: Using TypeScript for Service Worker (ServiceWorkerModule)

【讨论】：