了解存储空间配额

所有浏览器都对 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 和/或 maxAgeSecondspurgeOnQuotaError 是可选项。

maxEntries

这会对指定缓存的条目数(即唯一网址)数量设定上限。

通常,设置此属性是一个不错的选择,除非您知道给定策略可能会处理的可能网址数量很少。

maxAgeSeconds

超过此秒数前添加到缓存中的条目将被视为过时,并在下次访问缓存时自动清理。

这在管理存储空间配额方面不如 maxEntries 有效,因为只要在短时间内添加全部条目,您的缓存就可能增长到任意大小。当您知道想要施加新鲜度上限时,这非常有用,并且保留旧条目对于您的 Web 应用几乎没有价值。

purgeOnQuotaError

通过此选项,您可以将给定缓存标记为安全,以便在 Web 应用超出可用存储空间时自动删除。

此选项目前默认为 false。一般来说,运行时缓存在面对删除时应该具有弹性,因此将此选项设置为 true 是一种很好的做法,并有助于确保您的 Web 应用在面临存储限制时能够自动恢复。

可以存储多少数据?

每个浏览器都有自己的存储空间上限,因此这个问题没有唯一的答案。此外,某些浏览器具有动态限制,该限制因给定设备上的可用存储空间容量而异,因此有效上限可能会发生变化,恕不另行通知。

某些浏览器会提供一个界面,用于通过 navigator.storage.estimate() 查询源的大致存储空间容量以及上限。“估算可用存储空间”一文详细介绍了如何在自己的 Web 应用中使用该空间。

Chrome 无痕模式的特殊注意事项

Chrome 的无痕模式下打开 Web 应用会对存储空间施加一项特殊限制,但该限制不适用于常规浏览环境:无论设备上的可用空间如何,系统都会提供大约 100 MB 的配额限制。

请注意不透明的响应!

配额用量异常高的一个常见原因是,系统在运行时缓存了不透明响应,即在未启用 CORS 的情况下发出的请求跨源响应

出于安全考虑,浏览器会自动提高这些不透明响应的配额影响。例如,在 Chrome 中,即使是几千字节的不透明响应,也会占用大约 7 兆字节的配额。

开始缓存不透明响应后,您可能会快速用完比预期更多的配额,因此最佳实践是将 ExpirationPluginmaxEntries(可能还有 purgeOnQuotaError)搭配使用,并进行适当配置。