JS缓存API：Google Cloud Bucket提供的缓存图像未加载

Question

我正在编写一个Web应用程序，用户可以在其中下载图像以供以后使用Cache API脱机使用。

// when the user clicks the download button
window.caches.open("imageCache").then(function(cache) {
          cache.add(imageUrls)
              .then(() => console.log("image cached"))
              .catch((e) => console.error(e));
      });

这按预期工作。使用Chrome-Developer-Tools（在“应用程序”->“缓存存储”下），我会看到图像列表：

] >>

现在，当我想使用简单的img标签以脱机模式显示图像时，它不适用于从Google Cloud Bucket提供的图像，但它可以与其他图像源一起使用。

来自Google Cloud Buckets的图像无法在离线模式下加载：

[fakeimg.pl中的图像以离线模式显示：

知道为什么它不起作用？

我正在编写一个Web应用程序，用户可以在其中下载图像以供以后使用Cache API脱机使用。 //当用户单击下载按钮window.caches.open（“ imageCache”）。then（function（...

Answer 1

在这种情况下，罪魁祸首是vary: Origin。但是我注意到，Chrome似乎是唯一使用通过服务工作者使用通过Cache API without