获取服务工作者内部缓存的响应的响应标头

时间:2018-09-10 15:15:16

标签: javascript fetch service-worker cacheapi

我想获取服务工作者内部缓存响应的响应标头。这样做的目的是使我可以读取一个名为“ Modified”的自定义标头,以查看是否有必要通过将其与相同URL的“ HEAD”获取的响应标头进行比较来获取数据的新副本。 / p>

在安装服务工作者时,我用一些响应填充了称为v1 :: fundamentals的缓存。然后,我注册一个获取侦听器,以在高速缓存中查找请求,如果存在,则将其提供给服务。然后,我想用非陈旧的内容异步更新缓存,但前提是“修改的”标头包含的时间戳比缓存中的时间戳更新。在下面的简化代码中,我尝试使用headers.get()访问标头,但总会得到一个null。为什么会这样?

当我查看Chrome devtools中的缓存时,标头就在那儿,我只是无法从服务工作者中找到标头。

self.addEventListener('fetch', event => {
  console.log('%c[SW] Fetch caught: ', 'color: #42d9f4', event.request.url);

  // Let the browser do its default thing for non-GET requests.
  if (event.request.method != 'GET') {
    return;
  } else {
    // Prevent the default, and handle the request ourselves.
    event.respondWith(async function() {
      // Try to get the response from a cache.
      const cache = await caches.open('v1::fundamentals');
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // Try to get the headers
        var cacheDate = cachedResponse.headers.get('Modified');
        // Print header, returns 'null'
        console.log(cacheDate);

        event.waitUntil(cache.add(event.request));

        return cachedResponse;
      }

      return fetch(event.request);
    }());
  }
});

0 个答案:

没有答案