我熟悉 http 状态代码，但最近我在我的 chrome 调试器中看到了一条奇怪的行。相反，普通的Status Code:200 OK我看到的情况如下：Status Code:200 OK (from ServiceWorker)。
我的猜测是这只是告诉我 ServiceWorker 以某种方式负责访问此文档，但这只是随机猜测。任何人都可以权威地（没有猜测，有受尊重资源的链接）告诉我这是什么意思，有什么影响？
Chrome Network DevTools 中的“状态代码：200 OK（来自 ServiceWorker）”？
IT技术
javascript
html
google-chrome
http-headers
service-worker
2021-03-06 08:17:02
3个回答
这是混淆的常见来源，所以我想更详细地介绍一下。
我在这个 Gist 中有一个完整的工作演示，由于 RawGit ，您可以查看它的实时版本。
以下是内联 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.js，two.js以及three.js：
我们的 Service Worker 的fetch处理程序将执行以下三件事之一：
- 如果是对 的请求
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）”的原因“ 柱子。
Service Worker 是由浏览器在后台运行的脚本。所以 Status Code:200 OK (from ServiceWorker) 意味着“OK”成功代码，对于 GET 或 HEAD 请求，这个状态来自 ServiceWorker。
您可以阅读此链接以了解更多相关信息。 http://www.html5rocks.com/en/tutorials/service-worker/introduction/
这是正常的 。避免因200每个请求而引起混淆。它显示请求是一个SUCCESS但service-worker已响应资源/请求而不是network/server