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

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

提问by Salvador Dali

I am familiar with http status codes, but recently I saw a strange line in my chrome debugger. Instead of ordinary Status Code:200 OKI saw the following: Status Code:200 OK (from ServiceWorker).

我熟悉 http 状态代码，但最近我在我的 chrome 调试器中看到了一条奇怪的行。相反，普通的Status Code:200 OK我看到的情况如下：Status Code:200 OK (from ServiceWorker)。

My guess is that this just tells me that ServiceWorker is somehow responsible for accessing this document, but this is just random guess. Can anyone authoritatively (without guesses, with links to respected resources) tell me what does this mean and what are the implications?

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

回答by Jeff Posnick

This is a common source of confusion, so I wanted to go into a bit more detail.

这是混淆的常见来源，所以我想更详细地介绍一下。

I have a full working demo in this Gist, and you can view a live version of itthanks to RawGit.

我在这个 Gist 中有一个完整的工作演示，由于 RawGit ，您可以查看它的实时版本。

Here's the relevant portion of the service worker code inline, for illustrative purposes:

以下是内联 Service Worker 代码的相关部分，用于说明目的：

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.
});

And here's what a filtered version of the Network panel looks like in Chrome 48 when that service worker is in control of a page, and requests are made for one.js, two.js, and three.js:

而这里的网络面板看上去像在Chrome 48滤波版本时服务人员就是在页面的控制权，并请求对制造one.js，two.js以及three.js：

Our service worker's fetchhandler will do one of three things:

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

• If it's a request for one.js, it will fire off a fetch()request for the same URL, and then call event.respondWith()using that response. The first one.jsentry in the screenshot, the one with "(from ServiceWorker)" in the "Size" column, is there by virtue of the fact that we called event.respondWith()inside the fetchhandler. The second one.jsentry in the screenshot, the one with the little gear icon next to it and "(from cache)" in the "Size" column, represents that fetch()request that was made inside the service worker while responding to the event. Since the actual one.jsfile was already in the HTTP cache at the point I took this screenshot, you see "(from cache)", but if the HTTP cache didn't have that response already, you would see an actual network request along with the response size.
• If it's a request for two.js, it will handle the request by constructing a new Responseobject "from thin air". (Yes, you can do that!) In this case, we are calling event.respondWith(), so there's an entry for two.jswith "(from ServiceWorker)" in the "Size" column. But unlike with one.js, we're not using fetch()to populate the response, so there's no additional entry in the Network panel for two.js.
• Finally, if it's a request for three.js, our service worker's fetchevent handler won't actually call event.respondWith(). From the perspective of the page, and also from the perspective of the Network panel, there's no service worker involvement with that request, which is why there's just a "(from cache)" rather than "(from ServiceWorker)" in the "Size" column.

• 如果是对 的请求one.js，它将触发fetch()对相同 URL的请求，然后event.respondWith()使用该响应进行调用。one.js屏幕截图中的第一个条目，即“大小”列中带有“（来自 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。
• 最后，如果是对 的请求three.js，我们的服务工作者的fetch事件处理程序实际上不会调用event.respondWith()。从页面的角度，以及从网络面板的角度来看，该请求没有服务工作者参与，这就是为什么在“大小”中只有“（来自缓存）”而不是“（来自 ServiceWorker）”的原因“ 柱子。

回答by Hoang Tran Son

A service worker is a script that is run by your browser in the background. So Status Code:200 OK (from ServiceWorker) mean that “OK” success code, for GET or HEAD request and this status come from ServiceWorker.

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

You can read this link to understand more about this. http://www.html5rocks.com/en/tutorials/service-worker/introduction/

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

回答by Atul Sharma

This is normal . To avoid confusion arising out by 200for every request. Its showing that the request is a SUCCESSbut service-workerhas responded for the resource / request instead of network/server

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