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

Question

I was having service worker implemented in angular.js application where we have some custom code written in self.addEventListener('fetch', function (event) . Now i am planning to migrate the application to angular, and i found in angular we have将执行所有配置和缓存清理的特殊插件。 "@angular/service-worker": "~10.0.6", .

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

Answer 1

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

编辑服务工作人员文件。

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

补丁文件

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

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

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

测试服务人员

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