Workbox：如何從緩存中刪除請求

Question

我對所有 API Get 調用都使用了 staleWhileRevalidate Workbox v3 策略。 但是，有時我想在運行時從緩存中刪除特定請求。

示例：我有一個可以由客戶端更新的是/否 state。 最初，UI 在執行也返回“否”結果的請求時顯示“否”state（從緩存中獲取）。 請求的結果由 Workbox 緩存。

現在，用戶將其切換為“是”，系統更新服務器並在一段時間后發送另一個查詢以獲取最新值。 但是緩存仍然存儲在 UI 中顯示的“no”值，而新請求返回現在存儲在緩存中的“yes”。

我在這里需要的是在我從服務器發送更新請求時立即從緩存中刪除“否”結果。 我怎么做？ 如何從頁面代碼訪問 Workbox 的緩存？

Answer 1

Workbox 使用瀏覽器的 緩存存儲 API進行緩存。 您可以通過window上下文或服務工作者內部從您自己的代碼直接訪問相同的緩存。

如果您將 Workbox 策略配置為使用特定緩存名稱而不是默認緩存名稱，則執行此操作會更容易，否則您需要對某些 Workbox 邏輯進行逆向工程以在window內部創建默認緩存名稱語境。 假設您知道緩存名稱和要刪除的 URL，您可以從window上下文中調用以下 function 以使用緩存存儲 API 刪除條目：

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

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