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

问题描述

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

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

解决方法

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

编辑 Service Worker 文件。

• 打开文件<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

测试服务工作者

• ng 构建。
• 启动一个 dist 文件服务器。
• 它应该可以工作。