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

Question

在谷歌C​​hrome控制台旁边的HTTP状态代码Request我们有信息(from ServiceWorker).

可以Request知道这Response来自ServiceWorker？比较date从Response Headers可能？

Answer 1

根据设计,通过a返回的响应FetchEvent#respondWith()意味着与没有服务工作者参与的响应无法区分.无论我们谈论的响应是通过获得的适用XMLHttpRequest,window.fetch()或者设置src=一些元素属性.

如果您必须区分通过服务工作者参与而产生的响应,那么我能想到的最简洁的方法是将HTTP标头显式添加到输入的Response对象中FetchEvent#respondWith().然后,您可以从受控页面检查该标头.

但是,根据您的服务工作者获取它的方式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-WorkertrueheadersResponsefetch()