Question

关于此API https://developer.mozilla.org/en-US/docs/Web/API/Cache，我还要设置cache lifetime。

比方说，cache this request for no longer than 10 minutes

Answer 1

不幸的是，这不可能。

您链接的文档专门指出，由Cache API提供的缓存对象中的项目不会自动更新或删除。您必须自己实现这种逻辑。

您应该注意库，例如。 Workbox已经为您做到了。如果其他功能适合您的用例，则可以利用它。

https://developers.google.com/web/tools/workbox/

Answer 2

这是我没有工作箱的情况下实现的方法。（如果您可以切换到workbox，请继续阅读，如果不继续阅读的话）

创建了一个缓存策略，该策略可以onFetchComplete克隆来自网络的响应，并添加一个时间戳报头，例如“ x-sw-cache-timestamp”。
将此克隆的更新后的响应存储到缓存中。

onCacheMatch将“ x-sw-cache-timestamp”与currentTime进行比较，如果超过10分钟窗口，则从网络获取。

fucntion onFetchComplete(response)
{
  var timestampHeader = {};
  timestampHeader["x-sw-cache-timestamp"] = Date.now();

  return serviceWorker
      .cloneResponse(response, timestampHeader)
      .then(function (responseCopy)
      {
          cache.add(request, responseCopy.clone());
          return responseCopy;
       });
   }

 serviceWorker.cloneResponse = function (response, extraHeaders)
 {
        if (!response)
        {
            return serviceWorker.Promise.resolve();
        }

        var init = {
            status: response.status,
            statusText: response.statusText,
            headers: extraHeaders || {}
        };

        response.headers.forEach(function (val, key)
        {
            init.headers[key] = val;
        });

        return response.blob().then(function (blob)
        {
            return new serviceWorker.Response(blob, init);
        });
    });

onCacheMatch函数（cachedResponse，请求） { var durationInHeader = cachedResponse.headers.get（“ x-sw-cache-timestamp”）;

if (durationInHeader > (Date.now() - 600000))
{
    fetch(request);
    return cachedResponse;
}

return fetch（request）; }

希望这会有所帮助！

Answer 3

您可以动态创建用于编码其创建时间和最长期限的缓存名称，类似于：${dateStr}_${maxAgeMs}。然后，当在服务工作者中拦截提取时，您可以使用caches.keys浏览现有的缓存，并仅使用其名称查找尚未过期的缓存并与之匹配，或者如果它们都已过期则创建一个新的缓存并用传入的提取信息填充它。这也使您有机会删除过期的缓存。

我也需要这样做，并查看了提到的工作箱项目，似乎他们在使用IndexedDB存储做类似的事情，但是对于要求太高了。

ServiceWorker /缓存/设置TTL

3 个答案: