如何在 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 文件的服務器。
• 它應該有效。