如何为 Angular CLI 项目编辑 Service Worker 文件

Question

我已经使用命令 ng add @angular/pwa --project *project-name* 将 @angular/pwa 包添加到我的 Angular CLI 项目中，因此它变成了一个渐进式 Web 应用程序，这增加了一个我认识的服务工作者。我想编辑默认服务工作者以支持例如处理 Shared Targets 个链接。我看到服务工作者使用 Google Chrome 中的 "Inspect" 选项注册到名为 ngsw-worker.js 的文件。当使用 ng build --prod 编译时，如何编辑由 Angular CLI 创建的服务工作者 (ngsw-worker.js)？什么是最好的方法？

Answer 1

获取当前Service Worker:

有两种方法可以做到这一点。从 node_modules 文件夹中获取 ngsw-worker.js，或者在使用 ng build --prod.[=23= 构建应用程序后将其放入输出文件夹中]
将 ngsw-worker.js 的内容复制到一个新的 JavaScript 文件中，例如：*MyProject*/src/service-worker.js。

使 Angular CLI 在编译时包含您的文件：

进入*MyProject*/src/angular.json。搜索 "assets" 键。应该有两个。在每个键的数组底部，添加您的自定义服务工作者文件；例如：src/service-worker.js 所以 angular 将包含它。

编辑 Service Worker:

现在您可以根据需要编辑您的自定义 Service Worker 文件。例如：在顶部添加 self.addEventLister('fetch', event => { ... })。 该代码 添加了一个新事件（可能是多个相同的事件），因此它不会覆盖任何内容...它可能会干扰 [= 的复制内容中的其他内容49=]ngsw-worker.js.

最后一步 - 添加 Service Worker:

首先使用 ng build --prod 构建您的应用程序。
现在找到输出文件夹的位置（“outputPath” in angular.json）。在此示例中，它将是 "../public".
打开终端编辑文件。我喜欢使用 VS Code；相对于我通过扩展安装的项目文件夹，那里有一个终端。
使用以下命令覆盖您的文件： cp public/service-worker.js public/ngsw-worker.js.

就是这样！

了解更多的文档：

Automatic Progressive Web Apps

注：您应该考虑使用 @angular/service-worker 提供给您的已完成服务工作线程，在顶部使用您的自定义代码，将 @angular/pwa 添加到您的项目并使用 [= 编译时将自动安装该代码11=].

Answer 2

这是一个很好的问题，不知道为什么会被否决。正如所解释的 here 实现此目的的最佳方法是使用您自己的扩展原始服务工作者：

importScripts('./ngsw-worker.js');

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

然后将新的添加到 angular.json 资产数组：

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

然后替换app.module中的sw文件:

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

简洁明了。

如何为 Angular CLI 项目编辑 Service Worker 文件

How to edit your service worker file for an Angular CLI project

service-worker

angular-cli

angular-service-worker

获取当前Service Worker:

使 Angular CLI 在编译时包含您的文件：

编辑 Service Worker:

最后一步 - 添加 Service Worker:

就是这样！