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

Question

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

Request 可以知道 Response 来自 ServiceWorker 吗？比较 date 和 Response Headers 可能吗？

Answer 1

按照设计，通过FetchEvent#respondWith() 返回的响应与没有服务工作者参与的响应无法区分。无论我们所说的响应是通过XMLHttpRequest、window.fetch()，还是在某些元素上设置src= 属性，这都适用。

如果区分哪些响应源自 Service Worker 的参与对您很重要，那么我能想到的最简洁的方法是将 HTTP 标头显式添加到输入到 FetchEvent#respondWith() 的 Response 对象中。然后，您可以从受控页面检查该标题。

但是，根据您的服务人员如何获取其Response，这可能有点棘手/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，除了将它直接返回到页面之外，您将无能为力。否则，它会将一堆东西复制到一个新的Response 中，该X-Service-Worker 标头设置为true。 （这是一种迂回的解决方法，即您不能直接修改由fetch() 返回的Response 的headers。）