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

Question

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

javascriptofflineservice-workerfetch-api

6

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

请求能否以某种方式意识到响应来自ServiceWorker？也许可以通过比较来自响应头部的日期来判断。

- Karol Klepacki

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff Posnick · Accepted Answer

按照设计，通过FetchEvent#respondWith()返回的响应应该与没有使用service worker参与的响应无法区分。无论我们讨论的响应是通过XMLHttpRequest、window.fetch()还是设置某个元素的src=属性获得的。

如果你重视区分哪些响应是由service worker参与产生的，则我能想到最干净的方法是在传递给FetchEvent#respondWith()的Response对象中显式添加HTTP头。然后你可以从受控页面检查该头。

然而，这取决于你的service worker如何获取其Response，这可能有点棘手/不可靠，除非你有一个强烈的用例。以下是一种（再次强调，不建议）方法：

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的方法。）