Chrome -图像在几个小时后从缓存中消失

Question

我有一个网站，是作为一个信息亭的应用程序。在线时，我从wordpress API预加载数据和图像，并将图像存储在缓存中。服务工作者截取http，获取这些图像，并改为提供缓存数据。这样，应用程序就可以离线运行(包括API调用)。

但在离线运行几个小时(通常约为6小时)后，一些图像会从缓存中消失。而且总是一样的。

但不是全部。你知道我应该在哪里检查，看看哪里出了问题吗？

Answer 1

这样清除缓存可能有两个可能的原因，要么是你的存储空间变满(Chrome localStorage)，所以它会被清除；要么是检查从服务器发送的数据的过期长度，检查头部是否可以让你洞察过期所需的时间。

为了检查数据是否被从存储中逐出，请尝试在Safari或Edge浏览器中测试您的网站，在这些浏览器中不会发生这种逐出。

Answer 2

您是如何配置Cache-Control的？经常被删除的可能会被配置为max-age。

仍然建议您在web服务器上配置缓存控制标头，即使您知道您正在使用缓存存储API。您通常可以为未版本化的URL设置Cache-Control: no-cache，并且/或者为包含版本控制信息的URL设置Cache-Control: max-age=31536000。

如https://web.dev/service-workers-cache-storage所述

此外，您应该有一个检查存储量的高速缓存存储。(https://developers.google.com/web/tools/chrome-devtools/storage/cache)甚至他们声称要么所有缓存都被删除，要么一个都没有删除，因为目前这是一项实验技术，对这一点持怀疑态度是正常的。

您还需要负责定期清除缓存条目。每个浏览器对给定源可以使用的高速缓存存储量都有硬性限制。缓存配额使用估计值可通过StorageEstimate应用编程接口获得。浏览器会尽最大努力管理磁盘空间，但它可能会删除原点的缓存存储。浏览器通常会删除源的所有数据或不删除源的任何数据。确保按名称对缓存进行版本化，并且只使用脚本版本中可以安全操作的缓存。有关详细信息，请参见删除旧缓存。

如https://developer.mozilla.org/en-US/docs/Web/API/Cache所述

Answer 3

服务工作者使用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

你有没有一种清理方法或逻辑，可以删除旧的缓存条目，并最终以某种方式意外触发？类似于下面的代码。3.

caches.keys().then(function(keyList) {
              return Promise.all(keyList.map(function(key) {
                if (key !== cacheName) {
                  return caches.delete(key);
                }
              }));
            })

还有几个问题：

1. 您在软件中是否有处理缓存映像的业务逻辑？
2. 您是否可以通过使用storageQuota方法获取任何信息，以查看可用的配额和使用情况？这可能对了解图像是否因为达到限制而被逐出非常有用。(即使将框设置为持久性，您也不能100%确定资产是否会保留)

摘自“构建PWAs”(o‘’Reilly Tal Alter)：

当涉及到管理CacheStorage、为每个站点分配缓存中的空间以及清除旧的缓存条目时，每个浏览器的行为都不同。除了每个站点(也称为源)的存储限制外，大多数浏览器还会为其整个缓存设置大小限制。当缓存超过此限制时，浏览器将删除访问时间最长的站点的缓存(也称为最近最少使用的站点)。浏览器永远不会只删除站点缓存的一部分。要么删除网站的整个缓存，要么不删除任何缓存。这确保您的站点永远不会有不可预测的部分缓存。

考虑到最后一句话“浏览器永远不会只删除你网站缓存的一部分”。我可能会认为这可能不是一个缓存达到限制的问题，因为否则所有的图像将在缓存中被删除。

如果感兴趣，我写了一篇关于这个主题的文章here。

您可以将您的数据存储单元(也称为"box")标记为“持久的”，让用户代理尽可能长时间地保留它(更多详细信息请参见上面的storage API链接)。