我正在使用 Angular 5 开发渐进式 Web 应用程序。我们有一个为我们的应用程序提供原始 JSON 的 CMS。对于具有图像的内容，JSON 包含驻留在我们服务器上的图像的 URL。我可以从我们的 CMS 中检索所有图像的列表（或基于条件的过滤列表）。
使用 fetch 命令检索图像 URL 列表并让 Service Worker 提前缓存这些资产是否有意义？如果是这样，是否可以自定义 Angular 5 的 Service Worker 实现以在后台处理提取场景？或者，我是否必须创建一个手动 Service Worker 来获取图像资源的 URL 列表然后缓存它们？
【问题讨论】：
标签： angular angular5 progressive-web-apps angular-pwa
您可以使用 NGSW 作为explained here 预取或延迟加载您的资产。
您似乎对预加载资产感兴趣，但需要预先增加带宽和磁盘空间。如果管理得当，它绝对是一个很好的权衡，可以在运行时提供更快、更流畅的用户体验。
但是您在这里如何定义您的资产有点棘手。您的资产列表是使用 JSON 文件动态提取的。当有明确的调用时，SW 会缓存您的资产。如果您的 JSON 返回图像列表，您可以让 SW 缓存该 json 数据，并且在 JSON 中获取图像不是 SW 的典型用例，NGSW 也是如此。
您仍然可以通过稍微不同的方法来实现它。由于您的运行时决定哪些图像对用户会话/任何其他条件有效，因此您可以将这些资产返回为 prerendered html page（想想...响应）而不是 JSON 并将此 HTML 块注入主页并设置要隐藏的可见性。这使 SW 能够自然地缓存您动态定义/派生的资产。
更新：通过 URL 显式缓存，如果您不喜欢将图像放入 DOM 中（当图像列表很大时不要放入 DOM 可能是个好主意）
您可以通过在 SW as in here 和 here 中添加承诺，使用某些逻辑（在您的情况下为 JSON 调用和响应）来明确缓存一些特定的 URL。 sw-test 的文档是here，其中包含在 JSON 响应中缓存图像 URL 的确切用例。
【讨论】：