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

Question

我正在尝试使用工作箱创建 PWA。 我希望它缓存作为 rest api 调用结果显示的图像。 所以我得到链接并显示结果，但图像没有被工作箱缓存，我不知道为什么。 我对工作箱很陌生，但我认为基本概念会很简单。我添加了预缓存和以下路由：

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

在开发人员工具的网络选项卡中，我可以看到预缓存的文件被标记为“由 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
});

希望对你有帮助！