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

Question

我在angular.js应用程序中实现了service worker，我们在self.addEventListener('fetch', function (event)中编写了一些自定义代码。现在我打算把这个应用迁移到angular，我发现在angular中我们有一个特殊的插件，它会做所有的配置和缓存清理。"@angular/service-worker": "~10.0.6",.

现在我正在痛苦有自定义代码实现内部获取事件集成在angular版本。有没有一种方法可以让取回方法覆盖到一个组件中，并从那里执行操作?

Answer 1

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

编辑service worker文件

• 打开<project_name>/node_modules/@angular/service-worker/ngsw-worker.js
文件
• SearchhandleFetch functionLine 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

Test service worker

• ng。
• 启动一个dist文件服务器。