如何仅为 HTML 请求启用 Service Worker？答案

【问题标题】：How to enable Service Worker only for HTML requests?如何仅为 HTML 请求启用 Service Worker？
【发布时间】：2022-09-14 01:02:53
【问题描述】：

我正在使用 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;

}

虽然它只是将自定义标头添加到与 HTML 元素关联的请求中，但 Service Worker 正在评估来自网站的每个请求（样式、图像、脚本等）。

有没有办法只评估 HTML 请求？（不消耗配额来评估其他类型的请求）

标签： javascript service-worker cloudflare-workers

【解决方案1】：

这是不可能的，我担心。在“fetch”事件上添加事件侦听器后，您将收到所有事件。但是，如果您不感兴趣，不调用event.respondWith 是正确的做法。

为什么要担心“配额”？您应该不会注意到性能影响，或者您真的可以衡量任何差异吗？

作为一个小提示：您不需要检查“接受”标头，因为只有初始请求通常是 HTML 请求，并且此请求具有一些特殊模式：

event.request.mode === 'navigate'

这应该是更少的性能开销?

【讨论】：

我担心配额的原因是因为 Cloudflare 在其免费计划中允许每天 100,000 个请求。一个普通的 Wordpress 网站平均每页加载 25-30 个请求（html、样式、图像、脚本）等 - 如果我只需要评估第一个请求 (html)，获取请求 IP（并应用一些逻辑），评估其他请求是一种资源浪费。
但是服务工作者代码是在客户端站点上执行的。因此，针对 Cloudflare 的请求数量根本不应该受此影响。服务工作者基本上允许您将请求作为一种中间件拦截。不做更多请求，只在客户端机器上运行。主要是降低用户设备的速度。不是你的后端。
Cloudflare 对 Worker 的每次调用收费。显然，没有办法只对特定类型的请求（html 资源）调用 Cloudflare Worker。我在这里不是在谈论性能，而是在谈论成本。
好的。但我的观点是：如果客户端加载 HTML，他在安装服务工作者后不会向 Cloudflare 发出任何请求。只有在您的服务人员执行const response = await fetch(request); 的那一刻，针对 Cloudflare 的请求才会完成。因此，最终对 Cloudflare 的请求数量完全相同。有或没有服务人员。也许你正在你的服务工作者的“初始化”阶段加载一个额外的 HTML 来缓存？但除此之外，我仍然不明白为什么您的上述代码的请求数量应该更高。
Cloudflare 不对代理域上的请求收费。 Cloudflare 对 Worker 的请求收费（免费套餐为 100K/天的请求）。这就是这里的主要区别。