javascript - Chrome Network DevTools 中的 "Status Code:200 OK (from ServiceWorker)"？

Question

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

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

Answer 1

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

我在 this Gist 中有一个完整的工作演示，您可以查看 live version of it感谢 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:

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

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