所有浏览器都对 Web 应用的源站可以使用的存储空间量设定了上限。您可以将 Workbox 配置为在运行时自动清理其缓存的数据，以免因存储空间配额限制而影响网站缓存效率和可靠性。
支持哪些配置选项？
设置路由和运行时缓存策略时，您可以添加 workbox-expiration 中的 ExpirationPlugin 实例，这些实例配置了最适合要缓存的资源类型的设置。
例如，以下配置可用于在运行时缓存图片（具有明确的限制以及在超出配额时自动清理）：
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
// Use a cache-first strategy with the following config:
new CacheFirst({
// You need to provide a cache name when using expiration.
cacheName: 'images',
plugins: [
new ExpirationPlugin({
// Keep at most 50 entries.
maxEntries: 50,
// Don't keep any entries for more than 30 days.
maxAgeSeconds: 30 * 24 * 60 * 60,
// Automatically cleanup if quota is exceeded.
purgeOnQuotaError: true
})
]
})
);
使用 ExpirationPlugin 时，您需要设置 maxEntries 和/或 maxAgeSeconds。purgeOnQuotaError 是可选项。
maxEntries
这会对指定缓存的条目数（即唯一网址）数量设定上限。
通常，设置此属性是一个不错的选择，除非您知道给定策略可能会处理的可能网址数量很少。
maxAgeSeconds
超过此秒数前添加到缓存中的条目将被视为过时，并在下次访问缓存时自动清理。
这在管理存储空间配额方面不如 maxEntries 有效，因为只要在短时间内添加全部条目，您的缓存就可能增长到任意大小。当您知道想要施加新鲜度上限时，这非常有用，并且保留旧条目对于您的 Web 应用几乎没有价值。
purgeOnQuotaError
通过此选项，您可以将给定缓存标记为安全，以便在 Web 应用超出可用存储空间时自动删除。
此选项目前默认为 false。一般来说，运行时缓存在面对删除时应该具有弹性，因此将此选项设置为 true 是一种很好的做法，并有助于确保您的 Web 应用在面临存储限制时能够自动恢复。
可以存储多少数据？
每个浏览器都有自己的存储空间上限，因此这个问题没有唯一的答案。此外，某些浏览器具有动态限制，该限制因给定设备上的可用存储空间容量而异，因此有效上限可能会发生变化，恕不另行通知。
某些浏览器会提供一个界面，用于通过 navigator.storage.estimate() 查询源的大致存储空间容量以及上限。“估算可用存储空间”一文详细介绍了如何在自己的 Web 应用中使用该空间。
Chrome 无痕模式的特殊注意事项
在 Chrome 的无痕模式下打开 Web 应用会对存储空间施加一项特殊限制，但该限制不适用于常规浏览环境：无论设备上的可用空间如何，系统都会提供大约 100 MB 的配额限制。
请注意不透明的响应！
配额用量异常高的一个常见原因是，系统在运行时缓存了不透明响应，即在未启用 CORS 的情况下发出的请求跨源响应。
出于安全考虑，浏览器会自动提高这些不透明响应的配额影响。例如，在 Chrome 中，即使是几千字节的不透明响应，也会占用大约 7 兆字节的配额。
开始缓存不透明响应后，您可能会快速用完比预期更多的配额，因此最佳实践是将 ExpirationPlugin 与 maxEntries（可能还有 purgeOnQuotaError）搭配使用，并进行适当配置。