angular - 如何在 Ngsw 中处理自定义代码 - 在 Fetch 事件中

Question

我在 angular.js 应用程序中实现了服务工作者，我们在其中编写了一些自定义代码self.addEventListener('fetch', function (event) 。现在我计划将应用程序迁移到 Angular，我发现在 Angular 中我们有一个特殊的插件，它将执行所有配置和缓存清理。 "@angular/service-worker": "~10.0.6",.

现在我很难在 fetch 事件中实现自定义代码以集成到角度版本中。有什么方法可以让 fetch 方法覆盖到组件中并从那里执行操作。

标签： angularservice-workerngsw-config

Answer 1

根据您的消息，这些步骤是使用angular-cli@10.0.6完成的。

编辑服务工作人员文件。

• 打开文件<project_name>/node_modules/@angular/service-worker/ngsw-worker.js
• 搜索handleFetch function第 1121 行。
• 编辑根据您的要求调整该功能。查看handleFetchWithFreshness并handleFetchWithPerformance作为示例。
• 节省

补丁文件

• 使用patch-package保存补丁。npx patch-package @angular/service-worker
• 做出承诺。
• 添加postinstall script到package.json

"scripts": {
 "postinstall": "patch-package"
}

• 添加patch-package包npm install --save-dev patch-package

测试服务人员

• 构建。
• 启动 dist 文件的服务器。
• 它应该有效。