工作箱效期

通常會想對快取設定限制，例如允許在快取中儲存項目的時間長度，或是快取中應保留的項目數量。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 選填

  • 刪除

    void

    移除用於追蹤快取到期中繼資料的 IndexedDB 物件儲存空間。

    delete 函式如下所示： 

    () => {...}

    • returns

      Promise<void>

  • expireEntries

    void

    根據指定快取和條件，讓項目失效。

    expireEntries 函式如下所示： 

    () => {...}

    • returns

      Promise<void>

  • isURLExpired

    void

    可用於檢查網址是否已過期，以便在使用前確認。

    這項操作需要從 IndexedDB 進行查詢，因此可能會比較慢。

    注意：這個方法不會移除快取的項目，請呼叫 expireEntries() 來移除 IndexedDB 和快取項目。

    isURLExpired 函式如下所示： 

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

    • 網址

      字串

    • returns

      Promise<boolean>

  • updateTimestamp

    void

    更新指定網址的時間戳記。這可確保在根據項目上限移除項目時，最近使用的項目正確無誤，或在到期時，時間戳記保持最新狀態。

    updateTimestamp 函式如下所示： 

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

    • 網址

      字串

    • returns

      Promise<void>

ExpirationPlugin

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

只能與具有自訂 cacheName 屬性集的 workbox-strategy 例項搭配使用。換句話說，您無法使用這個方法，讓使用預設執行階段快取名稱的策略中項目過期。

只要快取回應使用或更新，這個外掛程式就會查看相關聯的快取，並移除任何舊的或額外的回應。

使用 maxAgeSeconds 時，回應可能會在過期後使用一次，因為系統會在使用快取回應後才進行過期清理作業。如果回應包含「Date」標頭，系統會執行輕量版的過期檢查，並不會立即使用回應。

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

屬性

  • 建構函式

    void

    constructor 函式如下所示： 

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

  • deleteCacheAndMetadata

    void

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

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

    使用快取到期功能時，建議您呼叫此方法，而非直接呼叫 caches.delete()，因為這可確保 IndexedDB 中繼資料也能徹底移除，並刪除已開啟的 IndexedDB 例項。

    請注意，如果您不針對特定快取使用快取到期時間，呼叫 caches.delete() 並傳入快取名稱即可。在這種情況下，您不需要使用任何 Workbox 專屬方法來清理。

    deleteCacheAndMetadata 函式如下所示： 

    () => {...}

    • returns

      Promise<void>

ExpirationPluginOptions

屬性

  • matchOptions

    CacheQueryOptions 選填

  • maxAgeSeconds

    號碼 選填

  • maxEntries

    號碼 選填

  • purgeOnQuotaError

    boolean 選填