Javascript Vue PWA：使用ServiceWorker从URL数组缓存远程媒体资产

我正在构建一个PWA，如果用户愿意，我可以选择下载并缓存整个应用程序中使用的所有媒体资产。默认PWA行为仅在请求在应用程序中导航时缓存资产。我需要提供的功能，按下按钮，下载资产，离线，并使用整个应用程序，并有所有的资产缓存，而不必访问各种路线和意见，而在线

对于上下文，当应用程序加载时，Vuex从我的API获取JSON内容，将其置于状态，并保存到IndexedDB

如果用户单击“下载所有内容”按钮，我想解析$store.state中的JSON，将URL（图像、PDF和MP4）收集到一个数组中，并将该数组传递给ServiceWorker，以便有意地缓存这些URL中的所有资产以供脱机使用（达到允许的原始存储限制）

我使用的是Vue CLI和Vue PWA插件，因此我有registerServiceWorker.js文件，并为生产生成了预缓存清单

我发现互联网上关于这一点的信息有点让人困惑，我本来想使用的方法是由概述的，但我不确定其中的一些细节，也不确定如何以一种与Vue CLI工作流完美匹配的方式解决这一问题

如果可能，您能否在回答中包括以下问题：

我使用GenerateSW还是InjectManifest

我是否需要编写自己的服务工作者，或者可以挂接到registerServiceWorker.js中的生命周期方法（register（）、cached（）、updated（））中

---

提前感谢您的帮助。

您解决过这个问题吗？我也需要这样做thing@Brad事实上，我仍然面临着这个问题。我想我有一个解决方案，但会尽快测试。我的计划是为我的内容遍历JSON数据，构建一个URL数组，然后使用缓存API将这些URL添加到缓存中：我们仍然没有答案，但是。。。我们可能可以向workbox添加vue使用的运行时缓存模式，如下所示：