Displaying cached image via Cache API

878 views Asked by At

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:

Cache storage

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.

1

There are 1 answers

1
Delta On BEST ANSWER

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;