如何僅為 HTML 請求啟用 Service Worker？

Question

我正在使用 Cloudflare Workers (JS) 為 Service Worker 開發代碼。 我只想為 HTML 請求觸發 Service Worker，以便優化正在評估的請求數量。 現在我正在使用這段代碼：

addEventListener('fetch', async event => {
 if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) {
  event.respondWith(handleRequest(event.request));
 }
});

async function handleRequest(request) {
  const response = await fetch(request);

  // Clone the response so that it's no longer immutable
  const newResponse = new Response(response.body, response);

  // Add a custom header with a value
  newResponse.headers.append('x-h-w', 'hello world');

  return newResponse;

}

雖然它只是將自定義 header 添加到與 HTML 元素關聯的請求中，但 Service Worker 正在評估來自網站的每個請求（樣式、圖像、腳本等）。

有沒有辦法只評估 HTML 請求？ （不消耗配額來評估其他類型的請求）

Answer 1

這是不可能的，我擔心。 在“fetch”事件上添加事件偵聽器后，您將收到所有事件。 但是，如果您不感興趣，不調用event.respondWith是正確的做法。

為什么要擔心“配額”？ 您應該不會注意到性能影響，或者您真的可以衡量任何差異嗎？

作為一個小提示：您不需要檢查“接受”header，因為只有初始請求通常是 HTML 請求，並且此請求具有一些特殊模式：

event.request.mode === 'navigate'

這應該是更少的性能開銷