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

Question

在 Google Chrome 控制台中 HTTP 状态代码旁边 Request我们有信息 (from ServiceWorker) .可以Request不知何故，Response来自ServiceWorker？比较 date来自 Response Headers也许？

Answer 1

根据设计，通过 FetchEvent#respondWith() 返回的响应意味着与没有 Service Worker 参与的响应无法区分。无论我们谈论的响应是通过 XMLHttpRequest 、 window.fetch() 还是在某些元素上设置 src= 属性获得，这都适用。

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

但是，根据您的 service worker 获取其 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 header 设置为 true 。 (这是一种迂回的工作方式，您无法直接修改 headers 返回的 Response 的 fetch() 。)