关于Service Worker：Workbox不会缓存动态加载的图像

Workbox won't cache dynamically loaded images

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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映像也不会出现在运行时缓存中。

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

相关讨论

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中发生了什么以及为什么发生。

1
2
3

workbox.setConfig({
debug: true
});

希望对您有帮助！