1

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

在安装服务工作者时，我用一些响应填充了一个名为 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);
    }());
  }
});
4

0 回答 0