我们如何检查请求的响应是否来自 Service Worker

Question

在 Google Chrome HTTP 状态代码旁边的控制台 Request 我们有信息 (from ServiceWorker).

可以 Request 以某种方式意识到 Response 来自 ServiceWorker？比较 date 和 Response Headers 也许吧？

Answer 1

根据设计，通过 FetchEvent#respondWith() 编辑的响应 return 与没有服务人员参与的响应无法区分。无论我们讨论的响应是通过 XMLHttpRequest、window.fetch() 还是在某些元素上设置 src= 属性获得的，这都适用。

如果区分哪些响应是由 service worker 参与发起的对您很重要，我能想到的最干净的方法是显式添加 HTTP header 到 Response object 被送入 FetchEvent#respondWith()。然后，您可以从受控页面检查 header。

但是，根据您的 service worker 获取其 Response 的方式，这可能有点 tricky/hacky，除非您有强大的用例，否则我不能说我推荐它.以下是（同样，不推荐）方法的样子：

event.respondWith(
  return fetch(event.request).then(function(response) {
    if (response.type === 'opaque') {
      return response;
    }

    var headersCopy = new Headers(response.headers);
    headersCopy.set('X-Service-Worker', 'true');

    return response.arrayBuffer().then(function(buffer) {
      return new Response(buffer, {
        status: response.status,
        statusText: response.statusText,
        headers: headersCopy
      });
    });
  })
)

如果您返回一个不透明的 Response，除了直接 return 将其直接添加到页面之外，您不能对它做太多事情。否则，它将把一堆东西复制到一个新的 Response 中，其中 X-Service-Worker header 设置为 true。（这是绕过一个事实的迂回方式，即您不能直接修改由 fetch() 编辑的 Response return 的 headers。）

我们如何检查请求的响应是否来自 Service Worker

How can we check if response for the request came from Service Worker

javascript

offline

service-worker

fetch-api