"Status Code:200 OK (from ServiceWorker)" 一个 Chrome 网络开发工具？

Question

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

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

Answer 1

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

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

Answer 2

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

感谢 RawGit，我在 this Gist, and you can view a 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，以及 three.js：

我们的 service worker 的 fetch 处理程序将做以下三件事之一：

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

Answer 3

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

"Status Code:200 OK (from ServiceWorker)" 一个 Chrome 网络开发工具？

"Status Code:200 OK (from ServiceWorker)" in Chrome Network DevTools?

html

javascript

google-chrome

http-headers

service-worker