Question

我有一个用作信息亭应用程序的网站。在线时，我会从wordpress API中预加载数据和图像，然后将图像存储在缓存中。服务人员截取这些图像的http并提供缓存数据。这样，该应用可以离线运行（包括API调用）。

但是离线运行几个小时后（通常大约6小时），一些图像从缓存存储中消失了。而且总是一样的。

但不是全部。知道应该在哪里检查出什么问题了吗？

Answer 1

清除缓存有两个可能的原因，要么您的存储空间已满（chrome localStorage），要么清除了它，或者检查从服务器发送的数据的到期长度，检查可能给您的标头洞察时间的洞察力。

要检查是否从存储中清除了数据，请尝试在没有发生这种驱逐的Safari或Edge浏览器中测试您的网站。

Answer 2

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

仍然建议您在以下位置配置Cache-Control标头您的Web服务器，即使您知道您正在使用缓存存储API。通常，您可以通过设置Cache-Control来摆脱困境：无版本URL的无缓存和/或缓存控制：max-age = 31536000 用于包含哈希等版本信息的网址。

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

所述

此外，您应该检查缓存存储量。（https://developers.google.com/web/tools/chrome-devtools/storage/cache）甚至他们声称要么删除了所有缓存，要么都不删除所有缓存，因为当前这是实验技术，因此对此有所怀疑是正常的。

您还负责定期清除缓存条目。每浏览器对给定的缓存存储量有硬限制产地可以使用。缓存配额使用情况估算值可通过 StorageEstimate API。浏览器会尽力管理磁盘空间，但它可能会删除源的缓存存储。浏览器将通常删除一个来源的所有数据，或者不删除任何数据一个起源。确保按名称对缓存进行版本控制，并仅使用缓存从他们可以安全操作的脚本版本开始。看到删除旧的缓存以获取更多信息。

如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

在任何地方都可以使用清除方法或逻辑来删除旧的缓存条目，并最终以某种方式被意外触发？类似于下面的代码。

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

还有两个问题：

软件在处理图像缓存方面是否有任何业务逻辑？
您可以使用storageQuota方法查看可用的配额和使用情况吗？这对于了解图像是否由于达到限制而被驱逐可能非常有用。（即使通过将框设置为持久性，也不能100％确保保留资产）

来自“正在建立PWA”（奥莱利-塔尔·阿特）：

每个浏览器在管理CacheStorage，为每个站点分配高速缓存中的空间以及清除旧的高速缓存条目时的行为都有所不同。

  除了每个站点的存储限制（也称为来源）外，大多数浏览器还将为其整个缓存设置大小限制。当缓存超过此限制时，浏览器将删除访问时间最久的站点（也称为最近最少使用的站点）的缓存。

  浏览器永远不会只删除网站缓存的一部分。您网站的整个缓存将被删除，也可能不会被删除。这样可以确保您的网站永远不会出现不可预测的部分缓存。

最后一句“浏览器永远不会只删除网站缓存的一部分”。我可能会认为达到缓存限制不是问题，否则所有所有图片都会在缓存中删除。

如果有兴趣，我写了一篇有关该主题here的文章。

您可以将数据存储单元（也称为“框”）标记为“永久”，从而使用户代理可以将其保留得尽可能长（有关更多详细信息，请参见上面的Storage API链接）。

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

3 个答案: