所有浏览器都会对 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
通过此选项，您可以将给定缓存标记为在您的网站应用超出可用存储空间时可以安全地自动删除。
此选项目前默认为 false。通常，运行时缓存应能够灵活应对删除，因此将此选项设置为 true 是一种很好的做法，并且有助于确保您的 Web 应用在面临存储空间限制时自动恢复。
您可以存储多少数据？
每款浏览器都有自己的存储空间上限，因此没有单一的答案。此外，某些浏览器具有动态限制，该限制会根据给定设备上的可用存储空间量而异，因此有效上限可能会在未经通知的情况下发生变化。
有些浏览器会公开一个接口，用于通过 navigator.storage.estimate() 查询源站正在使用的大致存储空间容量以及上限。如需详细了解如何在自己的 Web 应用中使用该空间，请参阅“估算可用存储空间”一文。
Chrome 无痕模式的特别注意事项
在 Chrome 无痕模式下打开 Web 应用会对存储空间施加特殊限制，而这种限制不适用于正常浏览环境：无论设备上有多少可用空间，配额限制均为大约 100 兆字节。
请注意，回答不透明！
配额用量超出预期的一个常见原因是不透明响应（也就是说，在未启用 CORS 的情况下发出的请求）运行时缓存了跨源响应。
出于安全考虑，浏览器会自动放大这些不透明响应的配额影响。例如，在 Chrome 中，即使是几千兆字节的不透明响应，最终也会占用大约 7 兆字节的配额。
开始缓存不透明响应后，您可能会比预期更快地耗尽配额，因此最佳实践是将 ExpirationPlugin 与 maxEntries（以及可能的 purgeOnQuotaError）搭配使用，并进行适当配置。