javascript - ServiceWorker / 缓存 / 设置 TTL

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

不幸的是，这是不可能的。

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

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

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

Answer 2

这就是我在没有Workbox的情况下实现它的方式。（如果您可以切换到Workbox，请这样做，如果不能 - 继续阅读）

• 创建了一个缓存策略，它 onFetchComplete 克隆来自网络的响应，添加一个时间戳标题说x-sw-cache-timestamp。
• 将此克隆的更新响应存储到缓存。
• onCacheMatchx-sw-cache-timestamp与 currentTime 比较，如果超过 10 分钟窗口，则从网络获取。

function 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)
  })
}

希望这可以帮助！

Answer 3

您可以动态创建缓存名称，对它们的创建时间和最大年龄进行编码，例如：${dateStr}_${maxAgeMs}. 然后，当在您的服务工作人员中拦截一个提取时，您可以使用查看现有缓存caches.keys并找到一个未过期的缓存，仅使用其名称并与之匹配，或者如果它们都已过期，则创建一个新缓存并使用传入的提取。这也使您有机会删除过期的缓存。

我也需要这样做，并查看了提到的工作箱项目，似乎他们正在使用 IndexedDB 存储做类似的事情，但这似乎有点过分了。