1

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

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

但不是所有的。知道我应该在哪里查看问题所在吗？

4

3 回答 3

0

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);
                }
              }));
            })

还有几个问题：

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

来自“构建 PWA”（o'Reilly - Tal Alter）：

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

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

浏览器永远不会只删除您网站缓存的一部分。要么您网站的整个缓存将被删除，要么一个都不会。这可确保您的站点永远不会有不可预测的部分缓存。

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

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

您可以将您的数据存储单元（又名“盒子”）标记为“持久”，使用户代理尽可能长时间地保留它（更多详细信息请参见上面的存储 API 链接）。

于 2019-07-10T10:54:06.807 回答
0

清除缓存可能有两个可能的原因，或者您的存储已满（chrome localStorage），因此它变得清晰或检查从服务器发送的数据的到期长度，检查可能让您了解时间的标头它需要过期。

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

于 2019-07-07T15:22:34.210 回答
0

你是怎么配置的Cache-Control？经常删除的可能配置为max-age.

仍然建议您在 Web 服务器上配置 Cache-Control 标头，即使您知道自己正在使用 Cache Storage 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 API 获得。浏览器尽最大努力管理磁盘空间，但它可能会删除源的缓存存储。浏览器 通常会删除源的所有数据或不删除源的任何数据。确保按名称对缓存进行版本化，并仅使用它们可以安全操作的脚本版本中的缓存。有关详细信息，请参阅删除旧缓存。

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

于 2019-07-09T13:08:58.167 回答