Workbox不会缓存动态加载的图像

Question

我正在尝试使用工作箱创建PWA。我希望它缓存由于rest api调用而显示的图像。因此，我获得了链接并显示了结果，但是图像没有被工作箱缓存，我也不知道为什么。我是Workbox的新手，但我认为基本概念非常简单。我添加了预缓存和以下路由：

workbox.routing.registerRoute(
  /\.css$/,
  new workbox.strategies.NetworkFirst()
);

workbox.routing.registerRoute(
  /\.js$/,
  new workbox.strategies.NetworkFirst()
);

workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new workbox.strategies.StaleWhileRevalidate()
);

在开发人员工具的网络标签中，我可以看到预缓存的文件被标记为“由服务工作者提供”。但是REST映像始终通过网络加载。REST映像也不会出现在运行时缓存中。

我如何也可以使用工作箱来缓存这些图像？

Answer 1

StaleWhileRevalidate工作箱策略确实假定每次为每个资源发出网络请求，因为它正在同时从缓存和网络发出两个请求。这就是为什么您在Chrome Dev Tools中看到这些网络请求的原因。在此处阅读更多有关此策略的信息https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies.StaleWhileRevalidate。因此，如果您只想从缓存中检索图像（如果那里有图像），则可以使用CacheFirst策略（https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies.CacheFirst）。

我还建议您启用Workbox调试，以便了解Service Worker中发生的情况以及原因。

workbox.setConfig({
  debug: true
});

希望对您有帮助！