为什么workbox registerRoute会得到不透明的响应，而预缓存却没有

Question

我正在尝试使用cachefirst策略预缓存jpg图像，以避免一次又一次地下载它们。

我面临的问题是我无法使用它，它不适用于CacheFirst（虽然它适用于StaleWhileRevalidate和NetworkFirst）

workbox.routing.registerRoute(
  /.+\.jpg/, 

  new workbox.strategies.CacheFirst({ // OPAQUE -> only possibility = StaleWhileRevalidate or NetworkFirst. CacheFirst won't work
    cacheName: 'posters',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 500,
      })
    ],
  })
); // BUG: THIS SEEMS TO TAKE MORE SPACE THAN THE SUM OF IMAGES: 50 images of ~5kb -> 580 Mb

工作箱的precaching方法也有效

workbox.precaching.precacheAndRoute(jpgList);

但是我不能使用它，因为我的jpg列表很大且很动态（即，在加载Web应用程序之前我不知道该列表。）。我不使用工作区CLI。

->我不明白为什么precaching起作用而.routing.registerRoute无效？

---

TRIED：

[页面加载后，我试图从网页JavaScript填充Cache Storage

window.caches.open( 'jpg-precache' )
  .then( cache => cache.addAll( jpgList ) )

并且可行，但是服务工作者不知道将这些资产与cachefirst一起使用。

.routing.registerRoute的优点还在于，我不必列出所有jpg的jpg，而只需列出主要的jpg，因为它将遇到的所有新jpg都将被缓存。

---

编辑：

[我忘记了重要的事情：图片来自第三方服务器，例如https://image.tmdb.org/t/p/w92/6ApDtO7xaWAfPqfi2IARXIzj8QS.jpg

Answer 1

如果未在正则表达式中键入，则工作箱实际上与同一服务器的正则表达式匹配。 Documentation说：

但是，对于跨域请求，正则表达式必须与URL的开头匹配。

因此您使用的正则表达式应类似于-https:\/\/image\.tmdb\.org.*\.jpg而不是.+\.jpg。