Chrome Network DevTools 中的“状态码：200 OK（来自 ServiceWorker）”？答案

【问题标题】："Status Code:200 OK (from ServiceWorker)" in Chrome Network DevTools?Chrome Network DevTools 中的“状态码：200 OK（来自 ServiceWorker）”？
【发布时间】：2016-02-08 23:48:56
【问题描述】：

我对http状态码很熟悉，但最近在我的chrome调试器中看到了一条奇怪的线。我看到的不是普通的Status Code:200 OK，而是：Status Code:200 OK (from ServiceWorker)。

我的猜测是，这只是告诉我 ServiceWorker 以某种方式负责访问此文档，但这只是随机猜测。任何人都可以权威地（无需猜测，带有受人尊敬的资源的链接）告诉我这是什么意思，有什么影响？

【问题讨论】：

标签： javascript html google-chrome http-headers service-worker

【解决方案1】：

这是一个常见的混淆来源，所以我想更详细一点。

我在 this Gist 中有一个完整的工作演示，感谢 RawGit，您可以查看 live version of it。

为了便于说明，以下是内联服务工作者代码的相关部分：

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('one.js')) {
    // Requests for one.js will result in the SW firing off a fetch() request,
    // which will be reflected in the DevTools Network panel.
    event.respondWith(fetch(event.request));
  } else if (event.request.url.endsWith('two.js')) {
    // Requests for two.js will result in the SW constructing a new Response object,
    // so there won't be an additional network request in the DevTools Network panel.
    event.respondWith(new Response('// no-op'));
  }

  // Requests for anything else won't trigger event.respondWith(), so there won't be
  // any SW interaction reflected in the DevTools Network panel.
});

这是在 Chrome 48 中，当 Service Worker 控制页面并针对 one.js、two.js 和 three.js 发出请求时，网络面板的过滤版本的样子：

我们的 Service Worker 的 fetch 处理程序将执行以下三件事之一：

如果是对one.js 的请求，它将触发对同一URL 的fetch() 请求，然后使用该响应调用event.respondWith()。屏幕截图中的第一个one.js 条目，即“大小”列中带有“（来自ServiceWorker）”的条目，是因为我们在fetch 处理程序中调用了event.respondWith()。屏幕截图中的第二个one.js 条目，旁边有一个小齿轮图标和“大小”列中的“（来自缓存）”，表示在响应时在服务工作者内部发出的fetch() 请求事件。由于实际的 one.js 文件在我截取此屏幕截图时已经在 HTTP 缓存中，因此您会看到“（来自缓存）”，但如果 HTTP 缓存还没有该响应，您会看到实际的网络请求以及响应大小。
如果是对two.js 的请求，它将通过“凭空”构造一个新的Response 对象来处理该请求。（是的，你可以这样做！）在这种情况下，我们调用 event.respondWith()，因此在“大小”列中有一个带有“（来自 ServiceWorker）”的 two.js 条目。但与one.js 不同的是，我们没有使用fetch() 来填充响应，因此网络面板中没有针对two.js 的额外条目。
最后，如果是对three.js 的请求，我们的Service Worker 的fetch 事件处理程序实际上不会调用event.respondWith()。从页面的角度来看，也从网络面板的角度来看，该请求没有服务工作者参与，这就是为什么“大小”中只有“（来自缓存）”而不是“（来自 ServiceWorker）” "列。

【讨论】：

所有带有齿轮图标的条目在 Initiator 列中的值为“Other”。也许更具描述性的值会更有意义？
@JeffPosnick 当您要检查缓存时会出现问题。 developers.google.com/web/ilt/pwa/… 使用这种建议的方法，每个请求都在 chrome 选项卡上列为“来自服务人员”，即使是那些委托给网络的请求。如何确保在这种情况下正确显示真实的网络请求？
齿轮图标是什么意思？
我在 google 调试服务人员页面 (developers.google.com/web/fundamentals/codelabs/…) 上找到了关于齿轮图标含义的问题的答案，该页面也引用了这个 stackoverflow 问题。 “齿轮图标表示这些请求来自 Service Worker 本身。具体来说，这些是 Service Worker 的安装处理程序发出的用于填充离线缓存的请求。”
@Jeff Posnick 你好，你能检查一下这个问题吗：stackoverflow.com/questions/64117929/…

【解决方案2】：

Service Worker 是由您的浏览器在后台运行的脚本。所以 Status Code:200 OK (from ServiceWorker) 表示“OK”成功代码，用于 GET 或 HEAD 请求，此状态来自 ServiceWorker。

您可以阅读此链接以了解更多信息。 http://www.html5rocks.com/en/tutorials/service-worker/introduction/

【讨论】：

会有什么影响？

【解决方案3】：

这是正常的。避免200 对每个请求产生混淆。它显示请求是SUCCESS 但service-worker 已响应资源/请求而不是network/server

【讨论】：