“状态码:200 OK(来自 ServiceWorker)"在 Chrome 网络开发工具中?
我对http状态码很熟悉,但是最近在我的chrome调试器中看到了一条奇怪的线.而不是普通的 Status Code:200 OK
我看到了以下内容:Status Code:200 OK (from ServiceWorker)
.
我的猜测是,这只是告诉我 ServiceWorker 以某种方式负责访问此文档,但这只是随机猜测.任何人都可以权威地(无需猜测,带有受人尊敬的资源的链接)告诉我这是什么意思,有什么影响?
解决方案这是一个常见的混淆来源,所以我想更详细一点.
我在
我们的 service worker 的 fetch
处理程序将执行以下三件事之一:
- 如果是对
one.js
的请求,它将触发对同一 URL 的fetch()
请求,然后调用event.respondWith()
使用该响应.屏幕截图中的第一个one.js
条目,即大小"列中带有(来自 ServiceWorker)"的条目,是因为我们调用了event.respondWith()
在fetch
处理程序中.屏幕截图中的第二个one.js
条目,旁边有一个小齿轮图标和大小"列中的(来自缓存)",表示fetch()
在响应事件时在服务工作者内部发出的请求.由于实际的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()
.从页面的角度来看,以及从网络面板的角度来看,该请求没有服务工作者参与,这就是为什么大小"中只有(来自缓存)"而不是(来自 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 afetch()
request for the same URL, and then callevent.respondWith()
using that response. The firstone.js
entry in the screenshot, the one with "(from ServiceWorker)" in the "Size" column, is there by virtue of the fact that we calledevent.respondWith()
inside thefetch
handler. The secondone.js
entry in the screenshot, the one with the little gear icon next to it and "(from cache)" in the "Size" column, represents thatfetch()
request that was made inside the service worker while responding to the event. Since the actualone.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 newResponse
object "from thin air". (Yes, you can do that!) In this case, we are callingevent.respondWith()
, so there's an entry fortwo.js
with "(from ServiceWorker)" in the "Size" column. But unlike withone.js
, we're not usingfetch()
to populate the response, so there's no additional entry in the Network panel fortwo.js
. - Finally, if it's a request for
three.js
, our service worker'sfetch
event handler won't actually callevent.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.
相关文章