Displaying cached image via Cache API

Question

I'm trying to use the Cache API to store large files (one being 500MB) for offline use. I'm able to create/open the cache, fetch the image URL from AWS S3, and put it into the cache:

let cache = await caches.open('my-cache');

let url = 'https://[mybucket].s3.amazonaws.com/example.png';

await fetch(url).then( async (response) => {
  if (!response.ok) {
    throw new TypeError("Bad response status");
  }

  return cache.put(url, response);
});

This appears properly in the inspector with (what I think) are the correct CORS/content size responses:

I'm also able to find it in the cache, however instead of searching for the full S3 url it seems to only store it with /example.png as the match:

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

let img = await cache.match('/example.png', options);

This returns a ReadableStream successfully, but I don't know where to go next.

I am hoping to default to loading from the cache since the file sizes can get quite large.

Answer 1

Checking the documentation for Cache.match(), what you're getting in response should be - well, a Response! So, from there, you can use Response.blob() and pass that into URL.createObjectURL(), which you can make the src of your image.

That was a mouthful, so here it is in code.

// Get the cached item...
const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

let img = await cache.match('/example.png', options);

// Handle the possibility of undefined
if(img === undefined) { return false; }

// Convert the image data to a blob...
let blob = img.blob();

// Assuming imgElement is our image element...
imgElement.src = URL.createObjectURL(blob);

// And finish it all off nicely.
return true;