Service Worker缓存不会将所有文件存储在数组中。

Question

我目前正在开发一个离线应用程序项目，其中存储在缓存中的文件数量相对较大（确切地说是432个）。

由于每个用户需求的文件都是动态的，因此我有一个方法来创建数组并将其传递给服务工作者。这一切都很顺利，如果我只是简单地打印出这个数组，它就包含了完整的文件列表。

问题出现在我加载所有内容后检查缓存存储时，出于某种原因只有49个文件被存储，而没有提示其余的文件去哪里了。

我使用Firefox，并知道缓存具有无限的存储空间，超过50MB时会有提示。在存储这49个文件后，总内存使用量略低于19MB，因此我不认为这是内存问题。

我已经搜索了服务工作者相关问题，但没有找到任何人遇到同样的问题，希望这里的某位能够帮助！

• 谢谢 :)

- Richard Connon

---

我不知道问题可能是什么，但我建议您尝试从SW中单独记录（console.log）每个缓存操作（初始化获取、获取响应、将其放入缓存等），并查看哪里出了问题。您是否在SW中使用某些实用程序库？尝试使用Chrome开发工具检查SW和Caches存储（不确定FF方面的成熟程度）。 - pate

这个问题不是在获取事件上出现的，而是在手动将文件加载到缓存中时出现的。(类似于在安装事件中加载文件的方式，只是在生命周期后面完成，因为这些文件是在安装事件触发后创建的)我已经记录了应该添加到缓存中的数组，它是完整的数组 - 然后没有任何迹象表明为什么完整的数组没有存储到缓存中。由于应用程序的性质，没有使用任何库，不幸的是由于支持问题，该应用程序无法在Chrome上运行。 - Richard Connon

我知道 Chrome 的缓存存储 DevTools 查看器一次加载 50 个结果，然后让你单击箭头以移动到下一页的 50 个结果。Firefox 也可能会这样做，或许这可以解释你所看到的情况？您可以使用JavaScript通过DevTools检查完整的高速缓存内容，方法如下：caches.open('my-cache-name').then(cache => cache.keys()).then(requests => requests.map(request => request.url)).then(console.log) - Jeff Posnick

就是这样！花了几天时间试图修复我的代码，结果发现一直都是正确的。Firefox缺少那个小箭头去到缓存的第二页。感谢您的帮助 :) - Richard Connon

Answer 1

正如Jeff Posnick所说，Chrome Devtools每次显示50个条目（0-49）。 在底部，应该显示总条目数，例如：总条目数：xxx。

- Ray Kim