时间戳

首页 > 解决方案 > 使用 ReadableStream 和 Response 从 Service Worker 的 fetch 事件中返回 HTML

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

问题描述

我正在尝试HTML在服务人员中为响应返回一个流，但浏览器似乎无法解析它（我正在使用 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" }}))

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

我用过的资源：

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

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

更新

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

标签： javascriptservice-worker

解决方案

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

此外，当您传递ReadableStream给Responsector时，Response.text方法不会处理流，而是返回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);
  });

推荐阅读