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

Question

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

能Request以某种方式知道Response来自 ServiceWorker 吗？比较date可能Response Headers？

Answer 1

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

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

但是，取决于您的服务人员如何获得它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
      });
    });
  })
)

如果你得到一个 opaque Response，除了直接将它返回到页面之外，你不能用它做很多事情。否则，它会将一堆东西复制到一个新Response的X-Service-Worker标题设置为true. （这是一种迂回的解决方法，即您不能直接修改返回的headers。）Responsefetch()