流式传输客户端生成的响应作为下载，而无需服务工作者 [英] Streaming a client-side generated response as a download, without service worker

问题描述

假设我生成了一个很大的文件，希望允许用户将其保存到他们的硬盘驱动器.

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

通常的方法是创建一个Blob，然后为其创建对象URL:

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();

今天有直接的方法吗?

我看到的唯一这样的流传输方法是使用Service Worker.不幸的是，在许多情况下服务工作者是不可用的.隐私模式可能会绕过所有服务人员.硬刷新页面会禁用它们.打开浏览器工具可以重置服务工作者状态.可以随时杀死该工作人员，并且不能保证通过消息传递使其存活.所有这些黑客都已在一个出色的项目中实现: https://github.com/jimmywarting/StreamSaver.js 但是，归根结底，由于这些浏览器的限制，它是不可靠的.

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.

是否存在用于流式传输下载"链接的适当API?客户端而不使用服务工作者?

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

推荐答案

正在定义一个 ...

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

这仍然是早期草案，只有Chrome浏览器可以实现.

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

您会对 FileSystemWritableFileStream 接口特别感兴趣.用户选择可以在其上弄乱数据的位置后，将允许在磁盘上写数据;-)

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();

};

这是一个动态故障对象.

这篇关于流式传输客户端生成的响应作为下载，而无需服务工作者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！