Question

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

可以Request以某种方式了解{{1}来自ServiceWorker？比较来自Response的{{1}}可能吗？

Answer 1

按照设计，通过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
      });
    });
  })
)

如果你找回一个不透明的Response，除了直接将它返回到页面之外，你不能做太多。否则，它会将一堆内容复制到一个Response标头设置为X-Service-Worker的新true中。（这是一种迂回的解决方法，即您无法直接修改headers返回的Response的{{1}}。

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

1 个答案: