Angular 5服务工作者能否在后台获取资源？

Question

我正在学习如何使用Angular 5开发渐进式Web应用程序。我们的CMS为应用程序提供原始JSON数据。对于包含图像的内容，JSON数据包含指向我们服务器上图像的URL。我可以从我们的CMS中检索出所有图像的列表（或根据条件筛选出列表）。

在这种情况下，使用fetch命令检索图像URL列表并让Service Worker预先缓存这些资源是否有意义？如果有，Angular 5的Service Worker实现能否自定义以处理后台的fetch场景？还是说，我必须创建一个手动的Service Worker来获取图像资源的URL列表并将它们缓存起来？

- Tom Schreck

Answer 1

您可以使用NGSW预取或延迟加载资产，如这里所述。看起来您有兴趣预加载资产，以换取前期增加的带宽和磁盘空间。如果管理得当，这绝对是一个不错的权衡，可以在运行时提供更快，更流畅的用户体验。

但是您在此处定义资产的方式有些棘手。您的资产列表是使用JSON文件动态拉取的。当显式调用它们时，SW会缓存您的资产。如果您的JSON返回图像列表，则可以使SW缓存该JSON数据，并且在JSON中获取图像不是SW的典型用例，因此也不适用于NGSW。

不过，您仍然可以通过稍微不同的方法实现它。由于您的运行时决定哪些图像对于用户会话/任何其他条件有效，因此您可以将这些资产作为预渲染的HTML页面（类似于...响应）返回，而不是JSON，并将此HTML块注入主页并将其可见性设置为隐藏。这使得SW可以自然地缓存您动态定义/派生的资产。

更新：按URL显式缓存，如果您不喜欢将图像放在DOM中（当图像列表很大时，不将其放在DOM中可能是个好主意）

您可以使用一些逻辑（在您的情况下为JSON调用和响应）通过在SW中放置一个Promise如此处和这里来显式缓存一些特定的URL。sw-test的文档在此处，其中包含您在JSON响应中缓存图像URL的确切用例。

- Anand

---

感谢您的回复。我的思路是：在我的服务工作者内，执行一次获取操作，在安装期间调用API返回一个图像URL的JSON数组。然后对于每个图像URL，调用cache.add来检索响应并将其存储在CacheStorage中。这样，当用户通过应用程序时，图像就在那里等待使用。这种方法看起来实际/可行吗？没有将图像注入DOM，只需加载到CacheStorage中。我很确定我无法使用NGSW完成此操作。 - Tom Schreck

@TomSchreck 在你的情况下进行缓存绝对是一件好事，毫无疑问会带来好处。只是问题在于如何实现。如果你不想按照 DOM 的方式来做，可以考虑更新答案中的显式缓存选项。希望能有所帮助。 - Anand

非常感谢。正是我所需要的。 - Tom Schreck