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.
Checking the documentation for
Cache.match()
, what you're getting in response should be - well, aResponse
! So, from there, you can useResponse.blob()
and pass that intoURL.createObjectURL()
, which you can make thesrc
of your image.That was a mouthful, so here it is in code.