我有一个用作自助服务终端应用程序的网站。在线时，我从 wordpress API 预加载数据和图像，并将图像存储在缓存存储中。 服务工作者拦截对这些图像的 http 获取并提供缓存数据。像这样，应用可以离线运行（包括 API 调用）。
但是在离线运行几个小时后（通常大约 6 小时），一些图像会从缓存存储中消失。而且总是一样的。
但不是全部。 知道我应该在哪里查看问题所在吗？
【问题讨论】：
标签： google-chrome progressive-web-apps web-worker cachestorage
Service Worker 使用Storage API 来缓存资产。
有可用的固定配额，并且因浏览器而异。
您可以使用以下调用并分析结果从您的应用中获得更多提示：
navigator.storageQuota.queryInfo("temporary")
.then(function(info) {
console.log(info.quota);
// It gives us the quota in bytes
console.log(info.usage);
// It gives us the used data in bytes
});
更新 1
您是否有任何清理方法 或逻辑可以删除旧缓存条目并最终以某种方式意外触发？类似于下面的代码。
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
return caches.delete(key);
}
}));
})
还有几个问题：
storageQuota 方法获取任何信息以查看可用配额和使用情况？这对于了解图像是否因为达到限制而被驱逐可能非常有用。 （即使将框设置为持久性，您也不能 100% 确定资产被保留）来自“构建 PWA”（o'Reilly - Tal Alter）：
在管理 CacheStorage、为每个站点分配缓存中的空间以及清除旧缓存条目时，每个浏览器的行为都不同。
除了每个站点的存储限制（也称为源）之外，大多数浏览器还会为其整个缓存设置大小限制。当缓存超过此限制时，浏览器将删除访问时间最长的站点（也称为最近最少使用）的缓存。
浏览器永远不会只删除您网站缓存的一部分。要么您网站的整个缓存将被删除，要么一个都不会。这可确保您的网站永远不会有不可预测的部分缓存。
考虑到最后一句话“浏览器永远不会只删除您网站的部分缓存。”我可能会认为达到缓存限制可能不是问题，否则 所有 图像将在缓存中被删除。
如果有兴趣，我写了一篇关于这个主题的文章here。
您可以将您的数据存储单元（又名“盒子”）标记为“持久”，使用户代理尽可能长时间地保留它（更多详细信息请参见上面的存储 API 链接）。
【讨论】：
你是如何配置Cache-Control的？经常删除的可能配置为max-age。
仍然建议您在 你的网络服务器，即使你知道你正在使用缓存 存储 API。您通常可以通过设置 Cache-Control 摆脱困境： 未版本化 URL 的无缓存和/或缓存控制：max-age=31536000 用于包含版本信息（如哈希）的 URL。
如https://web.dev/service-workers-cache-storage所述
此外，您应该检查缓存存储的存储量。 (https://developers.google.com/web/tools/chrome-devtools/storage/cache) 甚至他们声称要么删除所有缓存，要么不删除，因为目前是实验技术，对此有怀疑是正常的。
您还负责定期清除缓存条目。每个 浏览器对给定的缓存存储量有硬性限制 产地可以使用。缓存配额使用估算可通过 存储估计 API。浏览器尽最大努力管理磁盘空间， 但它可能会删除源的缓存存储。浏览器会 一般删除来源的所有数据或不删除来源的数据 一个起源。确保按名称对缓存进行版本化并仅使用缓存 来自他们可以安全操作的脚本版本。看 删除旧缓存以获取更多信息。
【讨论】：
这种清除缓存的原因可能有两个，要么是您的存储已满（chrome localStorage），所以它会被清除，或者检查从服务器发送的数据的到期长度，检查可能给您的标头过期时间的见解。
为了检查数据是否从存储中被驱逐，请尝试在不会发生此类驱逐的 Safari 或 Edge 浏览器中测试您的网站。
【讨论】：