1、什么是Cache Expiration

在缓存中应该允许设置项目存储在缓存中的时间长度或者应该在缓存中保留多少项目，通常会对缓存施加限制。 Workbox通过workbox-cache-expiration插件提供此功能，该插件允许你限制缓存中的条目数和/或删除已缓存很长一段时间的条目。

2、限制缓存条目数

要限制存储在缓存中的条目数，可以使用maxEntries选项，如下所示：

workbox.routing.registerRoute(
  new RegExp('/images/'),
  workbox.strategies.cacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
      }),
    ],
  })
);

有了这个，插件将被添加到此路线。 使用缓存响应或将新请求添加到缓存后，插件将查看配置的缓存并确保缓存条目的数量不超过限制。 如果是，则删除最旧的条目。

3、限制缓存条目的有效时间

要限制缓存请求的时间长度，你可以使用maxAgeSeconds选项定义最大有效时间（以秒为单位），如下所示：

workbox.routing.registerRoute(
  /\/images\//,
  workbox.strategies.cacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxAgeSeconds: 24 * 60 * 60,
      }),
    ],
  })
);

插件将在每次请求或缓存更新后检查并删除条目。

注意：

• 由于打开IndexedDB的速度很慢，因此在使用请求之前不会使其过期。 这意味着过期的请求可以使用一次，但在此之后将过期。
• 为了缓解这种情况，插件将检查缓存响应的“Date”标头，如果存在并且可以解析日期，它将基于此过期，因为它不需要IndexedDB查找。

4、高级用法

如果您希望使用与任何其他Workbox模块分开的过期逻辑，则可以使用CacheExpiration类执行此操作。

要对缓存应用限制，您需要为要控制的缓存创建一个CacheExpiration实例，如下所示：

const cacheName = 'my-cache';
const expirationManager = new workbox.expiration.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();

笔者个人订阅号~欢迎小伙伴们关注

微信公众号-感谢关注

若有疑问可以QQ联系笔者，虽然不一定100%解决你的问题，但是可以交流探讨一波：2276604211

顺便打个广告：如果有想入职中国银联上海技术开发的童鞋，也可以加上面的QQ资讯，笔者可以帮你回答一些相关问题~~