Chrome网络DevTools中的"状态代码:200 OK(来自ServiceWorker)"？

Question

我熟悉http状态代码,但最近我在chrome调试器中看到了一个奇怪的行.而不是普通的,Status Code:200 OK我看到了以下内容:Status Code:200 OK (from ServiceWorker).

我的猜测是,这只是告诉我ServiceWorker以某种方式负责访问这个文档,但这只是随机猜测.任何人都可以权威地(没有猜测,链接到受尊重的资源)告诉我这是什么意思和含义是什么？

Answer 1

这是混淆的常见原因,所以我想详细介绍一下.

我在这个Gist中有一个完整的工作演示,你可以通过RawGit 查看它的实时版本.

以下是服务工作者代码内联的相关部分,用于说明目的:

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以及three.js:

我们的服务工作者的fetch处理程序将执行以下三种操作之一:

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

Answer 2

Service Worker 是由浏览器在后台运行的脚本。因此，Status Code:200 OK（来自 ServiceWorker）意味着 \xe2\x80\x9cOK\xe2\x80\x9d 成功代码，对于 GET 或 HEAD 请求，并且此状态来自 ServiceWorker。

\n\n

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

\n