javascript - JS 缓存 API：Google Cloud Bucket 提供的缓存图像不加载

Question

我正在编写一个网络应用程序，用户可以在其中使用缓存 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（在 Application -> Cache Storage 下）我看到了图像列表：

现在，当我想使用简单的标签以离线模式显示图像时img，它不适用于从谷歌云存储桶提供的图像，但它适用于其他图像源。

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

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

知道为什么它不起作用吗？

Answer 1

本案的罪魁祸首是vary: Origin。但我注意到 Chrome 似乎是唯一使用通过 Cache API 缓存的图像而不使用服务工作者的浏览器。

所以我现在用工作箱实现了一个服务工作者，它可以工作。