Chrome Network DevTools中的“Status Code:200 OK(from ServiceWorker)”?

hfwmuf9z  于 11个月前  发布在  Go
关注(0)|答案(4)|浏览(332)

我很熟悉http状态码,但是最近我在我的Chrome调试器中看到了一个奇怪的行。我看到的不是普通的Status Code:200 OK,而是:Status Code:200 OK (from ServiceWorker)


的数据
我的猜测是,这只是告诉我ServiceWorker在某种程度上负责访问这个文档,但这只是随机猜测。任何作者(没有猜测,与链接到受人尊敬的资源)可以告诉我这是什么意思,有什么影响?

dtcbnfnu

dtcbnfnu1#

这是一个常见的混淆来源,所以我想深入一点。
我在this Gist中有一个完整的工作演示,你可以通过RawGit查看live version of it
以下是内联的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.
});

字符串
以下是Chrome 48中网络面板的过滤版本,当服务工作者控制页面时,请求是one.jstwo.jsthree.js
x1c 0d1x的数据
我们的service worker的fetch处理程序将执行以下三项操作之一:

  • 如果是对one.js的请求,它将对同一URL发出fetch()请求,然后使用该响应调用event.respondWith()。(来自ServiceWorker)”,因为我们在fetch处理程序中调用了event.respondWith()。屏幕截图中的第二个one.js条目,旁边有个小齿轮图标的那个,(来自高速缓存)”,表示在响应事件时在服务工作进程中发出的fetch()请求。由于实际的one.js文件已经在点我采取了这个截图,你看到“(从缓存)",但如果HTTP缓存没有响应已经,你会看到一个实际的网络请求沿着响应大小。
  • 如果是two.js的请求,它将通过“凭空”构造一个新的Response对象来处理请求。(是的,你可以这样做!)在本例中,我们调用event.respondWith(),因此two.js有一个条目,“但与one.js不同的是,我们没有使用fetch()来填充响应,因此在网络面板中没有two.js的额外条目。
  • 最后,如果它是对three.js的请求,我们的service worker的fetch事件处理程序实际上不会调用event.respondWith()。从页面的Angular 来看,也从Network面板的Angular 来看,没有service worker参与该请求,这就是为什么在“Size”列中只有“(from cache)”而不是“(from ServiceWorker)”。
oxcyiej7

oxcyiej72#

Service worker是一个由浏览器在后台运行的脚本。因此状态码:200 OK(来自ServiceWorker)意味着GET或HEAD请求的“OK”成功代码,此状态来自ServiceWorker。
您可以阅读此链接以了解更多信息。http://www.html5rocks.com/en/tutorials/service-worker/introduction/

yrdbyhpb

yrdbyhpb3#

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

lyfkaqu1

lyfkaqu14#

我的理解是:浏览器已经(存储)了上次请求的域的service worker,以有效地为关于状态的新http请求提供响应,从而有助于减少(更快)完成请求-响应周期的时间。

相关问题