工作框到期时间

通常，我们希望对缓存施加限制，例如限制缓存中存储项的时长或缓存中存储项的数量。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 函数如下所示： 

    () => {...}

    • 返回

      Promise<void>

  • expireEntries

    void

    使指定缓存和指定条件的条目过期。

    expireEntries 函数如下所示： 

    () => {...}

    • 返回

      Promise<void>

  • isURLExpired

    void

    可用于在使用网址之前检查网址是否已过期。

    这需要从 IndexedDB 中进行查找，因此速度可能会很慢。

    注意：此方法不会移除缓存的条目，请调用 expireEntries() 以移除 IndexedDB 和缓存条目。

    isURLExpired 函数如下所示： 

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

    • 网址

      字符串

    • 返回

      Promise<boolean>

  • updateTimestamp

    void

    更新给定网址的时间戳。这样可确保在根据条目数上限移除条目时，最近使用过的条目是准确的，或者在到期时，时间戳是最新的。

    updateTimestamp 函数如下所示： 

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

    • 网址

      字符串

    • 返回

      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 函数如下所示： 

    () => {...}

    • 返回

      Promise<void>

ExpirationPluginOptions

属性

  • matchOptions

    CacheQueryOptions（可选）

  • maxAgeSeconds

    number 可选

  • maxEntries

    number 可选

  • purgeOnQuotaError

    布尔值（可选）