JS Cache API: Cached Images served by Google Cloud Bucket don't load

Question

I'm writing a web app, where the user can download images for a later offline usage using the 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));
      });

This works as expected. Using the Chrome-Developer-Tools (under Application -> Cache Storage) I see the list of images:

Now, when I want to display the images in offline-mode using simple img-Tags, it does not work for images that are served from a Google Cloud Bucket, but it does work with other image-sources.

Image from Google Cloud Buckets fails to load in offline mode:

Image from fakeimg.pl shows up in offline mode:

Any idea why it's not working?

May be due to Cache control set not-transform for google images. — Rajesh G, Jan 03 '20 at 04:24

score 0 · Answer 1 · answered Jan 05 '20 at 14:33

The culprit in this case was vary: Origin. But I noticed that Chrome seems to be the only browser that makes use of images that are cached with the Cache API without using a service worker anyway.

So I implemented a service-worker with workbox now and it works.

JS Cache API: Cached Images served by Google Cloud Bucket don't load

1 Answers1