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

Question

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

Answer 1

这是一个很好的问题，不知道它是如何被否决的。如此处所述，实现此目的的最佳方法是使用您自己的服务人员扩展原始服务人员：

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 
})

干净又方便。

Answer 2

获取当前的Service Worker：

1. 有两种方法可以做到这一点。从文件夹中获取ngsw-worker.jsnode_modules，或者在使用ng build --prod.

2. 将ngsw-worker.js的内容复制到新的 JavaScript 文件中，例如：*MyProject*/src/service-worker.js。

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

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

编辑服务人员：

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

最后一步- 添加Service Worker：

5. 首先使用ng build --prod.

6. 现在找到输出文件夹的位置（中的“outputPath”angular.json）。在此示例中，它将是“../public”。

7. 打开终端来编辑文件。我喜欢使用 VS Code；那里有一个与通过扩展安装的我的项目文件夹相关的终端。

8. 使用以下命令覆盖您的文件： cp public/service-worker.js public/ngsw-worker.js。

就是这样！

了解更多信息的文档：

• 自动渐进式 Web 应用程序

注意： 您应该考虑使用 为您提供的已完成的 Service Worker @angular/service-worker，并将您的自定义代码放在顶部，当添加@angular/pwa到您的项目并使用 编译时，它将自动安装ng build --prod。