将 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) 的工作方式。

您应该考虑多个要点：

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

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

您可以在他安装时将 nm 存储在 SW 中。请确保不要一次保存太多，否则安装可能会很容易失败。

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