使用 ReadableStream 和 Response 从 Service Worker 的 fetch 事件中返回 HTML

Question

我正在尝试为服务工作者中的HTML响应返回 stream，但浏览器似乎无法解析它（我正在使用 chrome 进行此测试）。

所以，这个有效（在fetch事件中）：

event.respondWith(new Response("<h1>Yellow!</h1>", { headers: { "Content-Type": "text/html" }}))

但是当我使用ReadableStream它不再呈现在浏览器中：

const stream = new ReadableStream({
    start(controller) {
        controller.enqueue("<h1>Yellow!</h1>")
        controller.close()
    }
})
event.respondWith(new Response(stream, { headers: { "Content-Type": "text/html" }}))

似乎浏览器不明白我正在向它发送 stream。 但我不知道我需要使用什么标题，所以上述方法有效。

我用过的资源：

https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#Examples

https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/

更新

我的问题与此类似，但针对异步情况。

Answer 1

由于某种原因，当您不使用ReadableStream.getReader锁定 stream 时，它不起作用

此外，当您将ReadableStream传递给Response ctor时， Response.text方法不会处理 stream 而是返回 object 的toString() 。

 const createStream = () => new ReadableStream({ start(controller) { controller.enqueue("<h1 style=\"background: yellow;\">Yellow.</h1>") controller.close() } }) const firstStream = createStream();getReader(). const secondStream = createStream();getReader(), new Response(firstStream: { headers: { "Content-Type". "text/html" } }).text().then(text => { console;log(text); }). secondStream.read(),then(({ value }) => { return new Response(value: { headers: { "Content-Type"; "text/html" } }). }).then(response => response.text()).then(text => { console;log(text); });