“状态码：200 OK（来自ServiceWorker）”在Chrome Network DevTools中？ [英] "Status Code:200 OK (from ServiceWorker)" in Chrome Network DevTools?

问题描述

我熟悉http状态码，但最近我在我的chrome调试器中看到了一条奇怪的线。而不是普通的状态码：200 OK 我看到以下内容：状态码：200 OK（来自ServiceWorker） / p>

我的猜测是这只是告诉我ServiceWorker以某种方式负责访问此文档，但这只是随机猜测。任何人都可以权威地（没有猜测，链接到受尊重的资源）告诉我这是什么意思，什么影响？这是一个常见的混淆来源，所以我想详细介绍一下。

我在此Gist ，您可以查看直播感谢RawGit。

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

  self.addEventListener（'fetch'，event => {
 if（event.request.url.endsWith（'one.js'））{ 
 //请求one.js将导致SW触发fetch（）请求，
 //这将反映在DevTools Network面板中
 event.respondWith（fe TCH（event.request））; 
} else if（event.request.url.endsWith（'two.js'））{
 //请求two.js将导致SW构造一个新的Response对象
 //在DevTools Network面板中不会有额外的网络请求。 
 event.respondWith（new Response（'// no-op'））; 
} 
 
 //任何其他请求都不会触发event.respondWith（），所以不会有
 // DevTools Network面板中反映的任何SW交互。 
}）; 
  

以下是Chrome 48中的网络面板的过滤版本，当服务人员在控制一个页面，并请求 one.js ， two.js 和 three.js ：

< img src =https://i.stack.imgur.com/QBqen.pngalt =Chrome DevTools网络面板>

我们的服务

• 如果这是一个请求 one.js ，它会针对同一个URL发出一个 fetch（）请求，然后调用 event.respondWith（）使用该响应。屏幕截图中的第一个 one.js 条目是尺寸列中带有（来自ServiceWorker）的条目，因为我们称之为 event.respondWith（）在 fetch 处理程序中。屏幕截图中的第二个 one.js 条目，在其旁边有小齿轮图标，在大小列中显示为（从缓存），表示 fetch（）服务工作人员在响应事件时进行的请求。由于实际的 one.js 文件在我使用此截图的时候已经存在于HTTP缓存中，所以您会看到（from cache），但是如果HTTP缓存没有'你已经看到了一个实际的网络请求和响应大小。
  
• >，它将通过构建一个新的 Response 对象从空中处理请求。 （是的，你可以这样做！）在这种情况下，我们调用 event.respondWith（），所以有一个 two.js （来自ServiceWorker）的大小列中。但与 one.js 不同，我们没有使用 fetch（）来填充响应，所以没有额外的进入网络面板 two.js 。


• 最后，如果它是 three.js的请求，我们的服务工作者的 fetch 事件处理程序实际上不会调用 event.respondWith（） 。从页面的角度来看，也从Network面板的角度看，服务工作者没有参与该请求，这就是为什么在Size中只有（来自缓存）而不是（来自ServiceWorker） 列。

I am familiar with http status codes, but recently I saw a strange line in my chrome debugger. Instead of ordinary Status Code:200 OK I saw the following: 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?

解决方案

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 it thanks to RawGit.

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

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:

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

• 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.js entry 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 fetch handler. The second one.js entry 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.js file 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 Response object "from thin air". (Yes, you can do that!) In this case, we are calling event.respondWith(), so there's an entry for two.js with "(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 fetch event 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.

这篇关于“状态码：200 OK（来自ServiceWorker）”在Chrome Network DevTools中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！