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()
);

在开发者工具的网络选项卡中，我可以看到预缓存文件被标记为"Served from service worker"。但是 REST 图像总是通过网络加载。 REST 图像也不会出现在运行时缓存中。

如何让工作箱也缓存这些图像？

Answer 1

StaleWhileRevalidate Workbox 策略确实假设每次都为每个资源发出网络请求，因为它从缓存和网络并行发出两个请求。这就是为什么您会在 Chrome 开发工具中看到这些网络请求。在此处阅读有关此策略的更多信息 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
});

希望对您有所帮助！

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

Workbox won't cache dynamically loaded images

service-worker

progressive-web-apps

workbox