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

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

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

任务是避免在向下滚动页面时下载图像，并在滚动过程中立即显示图像

此时此刻：

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

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

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

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

---

谢谢大家!

如果您能与我们共享一些代码，那就太好了。特别是您的服务人员（SW）的工作方式

您应该考虑以下几点：

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

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

您可以在安装THNM时将其存储在SW中。请确保不要一次节省太多，因为安装很容易失败

---

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

谢谢Tarik的回答。目前我还没有使用SW。但据我所知，firebase小部件模拟了类似SW的东西。这就是为什么在从存储器中显示/加载图像后，该图像会缓存在浏览器中。缓存图像后，在滚动页面期间立即显示图像。是在使用PWA开始时下载和缓存所有图像的方法吗？