将 PWA 的所有图像从 firebase 存储下载到缓存中

Question

有一个基于vuejs的PWA，连接firebase。

该应用有多个带有图片的页面。每个页面都有几张图片——要查看页面上的所有图片，您需要向下滚动页面。所有图像都存储在 Firebase 存储中。 当您在第一时间向下滚动页面时，图像不会显示，因为应用程序会下载它们。几秒钟后，图像出现。

任务是避免在页面向下滚动时下载图片，并在滚动时立即显示图片。

此时：

• 所有图像都使用以下元数据上传到 Firebase 存储：metadata = { cacheControl: 'public, max-age=300000000, s-maxage=300000000' }
• 下载图像后，它会出现在应用缓存中。当您向下滚动所有页面时 - 所有图像都在应用程序缓存中。在这种情况下，所有图像都会在滚动过程中立即显示。
• 当您刷新页面时 - 所有图像都会从缓存中删除。

为了解决这个问题，我的建议是在打开 PWA 时将所有图像下载到缓存中。并且希望在接下来的 3 天内将图像下载到缓存中。

请帮助我找到在您打开 PWA 时将所有图像下载到缓存中的方法。

或者，如果我的建议不是解决任务的最佳方法 - 请提出更好的解决任务的方法。

谢谢！

Answer 1

如果您能与我们分享一些代码，那就太好了。尤其是您的 Service Worker (SW) 的工作方式。

您应该考虑多点：

每个 SW 都有一个生命周期，其中一些被设置为清除 Lifescyle 事件“已激活”的缓存。检查你的是否这样做。

您应该做的一件事是捕获对图像的所有 GET 请求，如果它们存在则从缓存中返回它们，如果不存在则从服务器返回（这应该在 SW 中完成）

您可以在安装时将它们存储在软件中。只要确保不要一次保存太多，因为安装很容易失败。

在您提前向下滚动并以异步方式将它们以较小的批次保存到缓存中。您也可以从前端代码将数据保存到缓存中。