I need to download an heavy file from the network, this file is then processed client-side and it results in a list of File entities.

Right now I'm using the Cache API to make sure downloading the same file doesn't need to go through the network again, but this requires my code to always process the cached file locally to obtain the list of files.

I'd like, instead, to store in cache the output of the process operation so that subsequent accesses don't require to process the single file to generate the multiple output files.

The problem I'm having is that I need a way to concat multiple File (or Blob?) entities into a single Blob that can then be added to my cache.

Below is the code I'm using right now, which doesn't handle the caching of the processed file:

async function getFile(url) {
  const cache = await caches.open('V1');
  
  const cached = await caches.match(url);
  if (cached != null) {
    return cached;
  }

  const response = await fetch(url, {
    credentials: 'include',
  });

  if (!response.ok) {
    throw new TypeError('bad response status');
  }

  await cache.put(url, response);

  return cache.match(url);
}

const download = await getFile('https://example.org/big.tar.gz');
const downloadArrayBuffer = await download.arrayBuffer();

// I'd like the cache to contain the output of the following operation
const files = await untar(downloadArrayBuffer);