工作箱效期

我們很常在快取上設下限制，指定允許項目儲存在快取中的時間長度，或是應保存在快取中的項目數量。Workbox 透過 workbox-expiration 外掛程式提供此功能，可讓您限制快取中的項目數量，及 / 或移除長時間的快取項目。

限制快取項目數量

若要限制儲存在快取中的項目數，您可以使用 maxEntries 選項，如下所示：

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
      }),
    ],
  })
);

如此一來，系統就會將外掛程式新增至這個路徑。使用快取回應或將新要求新增至快取後，外掛程式會查看設定的快取，確保快取項目數量未超過限制。如果有，系統會移除最舊的項目。

限制快取項目的存在時間

如要限制系統快取要求的時長，您可以使用 maxAgeSeconds 選項定義存在時間上限，如下所示：

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxAgeSeconds: 24 * 60 * 60,
      }),
    ],
  })
);

每次要求或快取更新後，這個外掛程式都會檢查並移除項目。

進階用法

如果想使用與其他 Workbox 模組分開使用的到期邏輯，可以使用 CacheExpiration 類別。

如要將限制套用至快取，請為要控制的快取建立 CacheExpiration 執行個體，如下所示：

import {CacheExpiration} from 'workbox-expiration';

const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
  maxAgeSeconds: 24 * 60 * 60,
  maxEntries: 20,
});

每次更新快取項目時，都必須呼叫 updateTimestamp() 方法，以便更新其年齡。

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

這樣一來，每當您想將一組項目到期時，您可以呼叫 expireEntries() 方法來強制執行 maxAgeSeconds 和 maxEntries 設定。

await expirationManager.expireEntries();

類型

CacheExpiration

CacheExpiration 類別可讓您定義儲存在 Cache 中的回應數到期時間和 / 或限制。

屬性

  • 建構函式

    void

    如要建立新的 CacheExpiration 執行個體，您必須至少提供其中一項 config 屬性。

    constructor 函式如下所示：

    (cacheName: string, config?: CacheExpirationConfig) => {...}

    • cacheName

      字串

      要套用限制的快取名稱。

    • config

      CacheExpirationConfig 選用

  • delete

    void

    移除用來追蹤快取到期中繼資料的 IndexedDB 物件存放區。

    delete 函式如下所示：

    () => {...}

    • returns

      Promise<void>

  • expireEntries

    void

    限於指定快取和指定條件的項目。

    expireEntries 函式如下所示：

    () => {...}

    • returns

      Promise<void>

  • isURLExpired

    void

    可用於檢查網址是否已過期或尚未使用。

    這項操作需要從索引資料庫進行查詢，因此速度可能較慢。

    注意：這個方法不會移除快取項目，請呼叫 expireEntries() 來移除已建立索引的 DB 和快取項目。

    isURLExpired 函式如下所示：

    (url: string) => {...}

    • url

      字串

    • returns

      Promise<boolean>

  • updateTimestamp

    void

    更新指定網址的時間戳記。這可以確保根據項目數量上限移除項目、最近使用的項目準確無誤，或到期時，時間戳記為最新資訊。

    updateTimestamp 函式如下所示：

    (url: string) => {...}

    • url

      字串

    • returns

      Promise<void>

ExpirationPlugin

這個外掛程式可用於 workbox-strategy，以便定期強制執行限制時間和 / 或快取要求數量。

只能與已設定自訂 cacheName 屬性的 workbox-strategy 執行個體搭配使用。換句話說，在使用預設執行階段快取名稱的策略中，不能用於過期項目。

每次使用或更新快取回應時，這個外掛程式會查詢相關聯的快取，並移除任何舊或額外回應。

使用 maxAgeSeconds 時，到期後可能會使用回應一次，因為到期時間清除作業要等到快取回應之後才會執行。如果回應有「Date」標頭，則系統會執行輕度權重到期檢查，且不會立即使用回應。

使用 maxEntries 時，系統會先從快取中移除最近要求的項目。

屬性

  • 建構函式

    void

    constructor 函式如下所示：

    (config?: ExpirationPluginOptions) => {...}

  • deleteCacheAndMetadata

    void

    這是可執行兩項作業的輔助方法：

    • 代表您呼叫 caches.delete()，刪除所有與這個外掛程式執行個體相關聯的基礎快取執行個體。
    • 從用於追蹤每個快取執行個體的到期詳細資料的 IndexedDB 中刪除中繼資料。

    使用快取到期時間時，建議直接呼叫 caches.delete() 方法，因為這麼做可確保索引資料庫的中繼資料也會被清除，並且能刪除開啟的索引資料庫執行個體。

    請注意，如果您「並未」使用特定快取的快取到期時間，則呼叫 caches.delete() 並傳入快取名稱應該就夠了。在此情況下，您就不需要採取 Workbox 特定方法進行清理。

    deleteCacheAndMetadata 函式如下所示：

    () => {...}

    • returns

      Promise<void>

ExpirationPluginOptions

屬性

  • matchOptions

    CacheQueryOptions 選用

  • maxAgeSeconds

    數字 選填

  • maxEntries

    數字 選填

  • purgeOnQuotaError

    布林值 (選用)