Streaming a client-side generated response as a download, without service worker

Question

Suppose I have a large file I generate client-side that I want to allow the user to save to their hard drive.

The usual method would be to create a Blob, and then create an object URL for it:

const blob = new Blob([chunks], {type: 'application/example'});
linkEl.href = URL.createObjectUrl(blob);

This works, but isn't very efficient as it can quickly exhaust all available memory, since the resulting file has to remain in memory.

A better method would enable streaming. Something like this:

const outputStream = new WritableStream();
linkEl.href = URL.createObjectUrl(outputStream);
while (let chunk = await getChunk()) {
  outputStream.write();
}
outputStream.end();

Is there a direct way to do this today?

The only method I've seen for streaming like this is to use a Service Worker. Unfortunately, there are many contexts in which a Service Worker isn't available. Privacy modes may bypass all service workers. Hard-refreshing the page disables them. Opening browser tools can reset the service worker state. The worker can be killed off at any time, and attempts to keep it alive with messaging are not guaranteed to work. All of these hacks have been implemented in an excellent project here: https://github.com/jimmywarting/StreamSaver.js But, at the end of the day, it's unreliable due to these browser constraints.

Does a proper API exist for streaming a "download" client-side without the use of a service worker?

Answer 1

There is one being defined... File System Access.

It's still an early draft and only Chrome has implementing it.

You would be particularly interested in the FileSystemWritableFileStream interface which will allow to write on disk after the user chooses where you can mess with their data ;-)

Non live code since "Sandboxed documents aren't allowed to show a file picker."...

onclick = async () => {

if( !("showSaveFilePicker" in self) ) {
  throw new Error( "unsupported browser" );
}

const handle = await showSaveFilePicker();
const filestream = await handle.createWritable();
const writer = await filestream.getWriter();
// here we have a WritableStream, with direct access to the user's disk
await writer.write( "hello" );
await writer.write( " world" );
writer.close();

};

Here is a live glitch poject.