Chrome网络DevTools中的“状态代码：200 OK（来自ServiceWorker）”？

Question

我熟悉http状态代码，但最近我在Chrome调试器中看到了一个奇怪的行。我没有看到普通Status Code:200 OK而是Status Code:200 OK (from ServiceWorker)。

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

Answer 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中的网络面板的过滤版本，以及one.js，two.js和{{1}的请求}}：

我们的服务工作者的three.js处理程序将执行以下三种操作之一：

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

Answer 2

服务工作者是您的浏览器在后台运行的脚本。因此，状态代码：200 OK（来自ServiceWorker）表示“OK”成功代码，对于GET或HEAD请求，此状态来自ServiceWorker。

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

Answer 3

这很正常。避免200针对每个请求引起的混淆。它显示请求为SUCCESS，但service-worker已针对资源/请求而不是network/server

进行了响应