Workbox：如何从缓存中删除请求

Question

我对所有 API Get 调用都使用了 staleWhileRevalidate Workbox v3 策略。但是，有时我想在运行时从缓存中删除特定请求。

示例：我有一个可以由客户端更新的 yes/no 状态。最初，UI 在执行同样 returns 结果为“否”的请求时显示“否”状态（从缓存中获取）。请求的结果由Workbox缓存。

现在，用户将其切换为“是”，系统更新服务器并在一段时间后再次发送查询以获取最新值。但是缓存仍然存储 UI 中显示的“no”值，而新请求 returns 现在存储在缓存中的“yes”。

这里我需要做的是在我从服务器发送更新请求时立即从缓存中删除“否”结果。我怎么做？如何从页面代码访问 Workbox 的缓存？

Answer 1

Workbox 使用浏览器的 Cache Storage API 进行缓存。您可以从您自己的代码通过 window 上下文或服务工作者内部直接访问相同的缓存。

如果您将 Workbox 策略配置为使用特定缓存名称而不是默认缓存名称，则这样做会更容易，因为否则您需要 reverse-engineer 一些 Workbox 逻辑来创建window 上下文中的默认缓存名称。假设您知道缓存名称和要删除的 URL，您可以从 window 上下文中调用以下函数以使用缓存存储 API 删除条目：

async function deleteFromCache(cacheName, urlOrPath) {
  const cache = await caches.open(cacheName);
  await cache.delete(urlOrPath);
}

// Later:
await deleteFromCache('runtime-cache', '/path/to/entry');

Workbox：如何从缓存中删除请求

Workbox: how to remove a request from the cache

browser-cache

service-worker

workbox