阐述 Service Worker 的 FetchEvent 拦截机制，以及如何利用 Streams API (ReadableStream, TransformStream, WritableStream) 实现高级的响应流处理和数据转换。

各位观众老爷们，晚上好！欢迎来到今天的“Service Worker 黑魔法：FetchEvent + Streams API 骚操作”专场。今天咱们就来聊聊 Service Worker 里面那些让人又爱又恨的 FetchEvent 拦截机制，以及如何配合 Streams API 玩出一些花样。

Part 1: FetchEvent 拦截：拦截一切，掌控全局

首先，我们得明白 FetchEvent 是个啥玩意儿。简单来说，当你的网页发起一个网络请求（比如请求图片、API 数据等等），Service Worker 就会收到一个 FetchEvent。这个 Event 里面包含了请求的所有信息，比如 URL、Method、Headers 等等。

Service Worker 最核心的功能之一就是“拦截”这些请求。一旦拦截了，浏览器就不会直接去服务器要数据了，而是把球踢给 Service Worker，让它来决定怎么处理。

// service-worker.js

self.addEventListener('fetch', event => {
  console.log('拦截到请求：', event.request.url);

  // event.respondWith() 是关键！
  event.respondWith(
    // 这里可以自定义响应
    fetch(event.request) // 先默认去服务器要数据
  );
});

上面的代码是最简单的拦截示例。addEventListener('fetch', ...) 就像一个守门员，拦截所有通过的请求。event.respondWith() 是关键，它告诉浏览器，这个请求的响应由我（Service Worker）来控制。

如果我不调用 event.respondWith()，浏览器就会像没看到 Service Worker 一样，直接去服务器请求了。

拦截的艺术：策略决定生死

拦截之后，我们可以做什么呢？这就有很多策略了：

• 缓存优先 (Cache First): 先看缓存里有没有，有就直接返回，没有再去服务器要。这是 PWA 的常用策略，能显著提升加载速度。
• 网络优先 (Network First): 先尝试从网络获取，失败了再看缓存。适合需要最新数据的场景。
• 仅缓存 (Cache Only): 只从缓存读取，没有就报错。适合离线应用。
• 仅网络 (Network Only): 强制从网络获取，忽略缓存。
• Stale-While-Revalidate: 先返回缓存，同时去网络更新缓存。用户能立刻看到内容，下次刷新就是最新的。

咱们来个缓存优先的例子：

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/image.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('缓存资源：', urlsToCache);
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          console.log('从缓存返回：', event.request.url);
          return response;
        }
        console.log('从网络请求：', event.request.url);
        return fetch(event.request);
      })
  );
});

这段代码首先在 install 事件中把一些静态资源缓存起来。然后在 fetch 事件中，先去缓存里找，找到了就直接返回，找不到再去网络请求。

Part 2: Streams API：数据的流水线，处理的瑞士军刀

光拦截还不够，有时候我们需要对数据进行一些处理，比如：

• 解压缩: 服务器返回 gzip 压缩的数据，需要在客户端解压缩。
• 数据转换: 将 JSON 数据转换为其他格式，比如 CSV。
• 流式处理: 逐步接收数据，逐步处理，而不是一次性加载所有数据。

这时候，Streams API 就派上用场了。Streams API 提供了一种处理流式数据的方式，可以像流水线一样对数据进行处理。

Streams API 主要有三种类型：

• ReadableStream: 可读流，用于读取数据。
• WritableStream: 可写流，用于写入数据。
• TransformStream: 转换流，用于转换数据。

ReadableStream：数据的源头

ReadableStream 是数据的源头，可以从各种来源读取数据，比如网络请求、文件等等。

// 从网络请求创建一个 ReadableStream
fetch('/data.txt')
  .then(response => {
    const reader = response.body.getReader(); // 获取 ReadableStreamDefaultReader

    // 循环读取数据
    function read() {
      reader.read().then(({ done, value }) => {
        if (done) {
          console.log('读取完成');
          return;
        }
        console.log('读取到数据：', new TextDecoder().decode(value)); // 将 Uint8Array 转换为字符串
        read(); // 继续读取
      });
    }

    read();
  });

这段代码从 /data.txt 请求数据，然后通过 response.body.getReader() 获取一个 ReadableStreamDefaultReader。这个 Reader 可以用来读取流中的数据。

reader.read() 返回一个 Promise，resolve 的结果是一个对象，包含 done 和 value 两个属性。done 表示是否读取完成，value 是一个 Uint8Array，包含了读取到的数据。

WritableStream：数据的归宿

WritableStream 是数据的归宿，可以将数据写入到各种目标，比如文件、网络等等。

// 创建一个 WritableStream，将数据写入到控制台
const writer = new WritableStream({
  write(chunk) {
    console.log('写入数据：', new TextDecoder().decode(chunk));
  },
  close() {
    console.log('写入完成');
  },
  abort(error) {
    console.error('写入出错：', error);
  }
});

// 创建一个 ReadableStream，向 WritableStream 写入数据
const readable = new ReadableStream({
  start(controller) {
    controller.enqueue(new TextEncoder().encode('Hello, '));
    controller.enqueue(new TextEncoder().encode('World!'));
    controller.close();
  }
});

// 将 ReadableStream 管道到 WritableStream
readable.pipeTo(writer);

这段代码创建了一个 WritableStream，将数据写入到控制台。然后创建了一个 ReadableStream，向 WritableStream 写入数据。最后使用 readable.pipeTo(writer) 将 ReadableStream 管道到 WritableStream。

TransformStream：数据的变形金刚

TransformStream 是数据的变形金刚，可以将数据从一种格式转换为另一种格式。

// 创建一个 TransformStream，将字符串转换为大写
const transformStream = new TransformStream({
  transform(chunk, controller) {
    const str = new TextDecoder().decode(chunk).toUpperCase();
    controller.enqueue(new TextEncoder().encode(str));
  }
});

// 创建一个 ReadableStream，向 TransformStream 写入数据
const readable = new ReadableStream({
  start(controller) {
    controller.enqueue(new TextEncoder().encode('hello, '));
    controller.enqueue(new TextEncoder().encode('world!'));
    controller.close();
  }
});

// 将 ReadableStream 管道到 TransformStream，再管道到 WritableStream
readable
  .pipeThrough(transformStream)
  .pipeTo(new WritableStream({
    write(chunk) {
      console.log('写入数据：', new TextDecoder().decode(chunk));
    }
  }));

这段代码创建了一个 TransformStream，将字符串转换为大写。然后创建了一个 ReadableStream，向 TransformStream 写入数据。最后使用 readable.pipeThrough(transformStream) 将 ReadableStream 管道到 TransformStream，再管道到 WritableStream。

Part 3: FetchEvent + Streams API：打造你的专属数据处理管道

现在，让我们把 FetchEvent 和 Streams API 结合起来，打造一些高级的响应流处理和数据转换方案。

1. 解压缩 Gzip 响应

很多服务器会使用 Gzip 压缩来减小响应体积。在 Service Worker 中，我们可以使用 Streams API 来解压缩 Gzip 响应。

首先，你需要引入一个解压缩库，比如 pako 或者 fflate。这里我们使用 fflate：

importScripts('https://unpkg.com/[email protected]/umd/index.js');

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 检查响应是否是 Gzip 压缩
        if (response.headers.get('Content-Encoding') === 'gzip') {
          // 创建一个 ReadableStream
          const readableStream = response.body;

          // 创建一个 TransformStream，用于解压缩 Gzip 数据
          const transformStream = new TransformStream({
            transform(chunk, controller) {
              // 使用 fflate 解压缩
              const decompressed = fflate.unzlibSync(new Uint8Array(chunk));
              controller.enqueue(decompressed);
            }
          });

          // 将 ReadableStream 管道到 TransformStream
          const decompressedStream = readableStream.pipeThrough(transformStream);

          // 创建一个新的 Response 对象，使用解压缩后的数据
          return new Response(decompressedStream, {
            headers: {
              'Content-Type': response.headers.get('Content-Type') // 保留 Content-Type
            }
          });
        }

        // 如果不是 Gzip 压缩，直接返回原始响应
        return response;
      })
  );
});

这段代码首先检查响应头 Content-Encoding 是否为 gzip。如果是，就创建一个 TransformStream，使用 fflate.unzlibSync() 解压缩数据，然后创建一个新的 Response 对象，使用解压缩后的数据。

2. 数据转换：JSON to CSV

有时候，我们需要将 JSON 数据转换为 CSV 格式。比如，服务器返回 JSON 数据，但是我们需要在客户端导出 CSV 文件。

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('/data.json')) {
    event.respondWith(
      fetch(event.request)
        .then(response => response.json())
        .then(jsonData => {
          // 将 JSON 数据转换为 CSV 格式
          const csvData = convertJsonToCsv(jsonData);

          // 创建一个 ReadableStream，用于提供 CSV 数据
          const readableStream = new ReadableStream({
            start(controller) {
              controller.enqueue(new TextEncoder().encode(csvData));
              controller.close();
            }
          });

          // 创建一个新的 Response 对象，使用 CSV 数据
          return new Response(readableStream, {
            headers: {
              'Content-Type': 'text/csv',
              'Content-Disposition': 'attachment; filename="data.csv"' // 设置下载文件名
            }
          });
        })
    );
  }
});

// 将 JSON 数据转换为 CSV 格式
function convertJsonToCsv(jsonData) {
  if (!Array.isArray(jsonData) || jsonData.length === 0) {
    return '';
  }

  const headers = Object.keys(jsonData[0]);
  const csvRows = [];

  // 添加 CSV 头部
  csvRows.push(headers.join(','));

  // 添加 CSV 数据行
  for (const row of jsonData) {
    const values = headers.map(header => {
      let value = row[header];
      if (typeof value === 'string') {
        value = value.replace(/"/g, '""'); // 转义双引号
        return `"${value}"`; // 用双引号包裹字符串
      }
      return value;
    });
    csvRows.push(values.join(','));
  }

  return csvRows.join('n');
}

这段代码首先判断请求的 URL 是否以 /data.json 结尾。如果是，就将 JSON 数据转换为 CSV 格式，然后创建一个 ReadableStream，用于提供 CSV 数据。最后创建一个新的 Response 对象，设置 Content-Type 为 text/csv，Content-Disposition 为 attachment; filename="data.csv"，这样浏览器就会将响应下载为 CSV 文件。

3. 流式处理：逐步加载，逐步渲染

对于大型数据，一次性加载所有数据可能会导致性能问题。我们可以使用 Streams API 来逐步加载数据，逐步渲染。

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('/large-data.txt')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // 获取 ReadableStream
          const readableStream = response.body;

          // 创建一个 TransformStream，用于处理每一块数据
          const transformStream = new TransformStream({
            transform(chunk, controller) {
              // 处理每一块数据，比如将数据渲染到页面上
              const data = new TextDecoder().decode(chunk);
              // 这里可以调用你的渲染函数，将数据渲染到页面上
              renderData(data);
              controller.enqueue(chunk); // 将数据传递给下一个 stream (可选)
            }
          });

          // 将 ReadableStream 管道到 TransformStream
          return new Response(readableStream.pipeThrough(transformStream), {
            headers: {
              'Content-Type': 'text/plain'
            }
          });
        })
    );
  }
});

// 渲染数据的函数 (需要在页面中定义)
function renderData(data) {
  const container = document.getElementById('data-container');
  if (container) {
    container.textContent += data;
  }
}

这段代码首先获取 ReadableStream。然后创建一个 TransformStream，用于处理每一块数据。在 transform 函数中，我们可以将数据渲染到页面上。

总结：掌控数据流，玩转 Service Worker

今天我们学习了 Service Worker 的 FetchEvent 拦截机制，以及如何使用 Streams API 进行高级的响应流处理和数据转换。

技术点	描述
FetchEvent	Service Worker 拦截网络请求的关键事件，可以通过 event.respondWith() 自定义响应。
Streams API	提供了一种处理流式数据的方式，包括 ReadableStream (可读流)、WritableStream (可写流) 和 TransformStream (转换流)。
缓存策略	可以根据不同的场景选择不同的缓存策略，比如缓存优先、网络优先、Stale-While-Revalidate 等。
Gzip 解压缩	可以使用 Streams API 和解压缩库 (比如 fflate) 来解压缩 Gzip 响应。
JSON to CSV	可以使用 Streams API 将 JSON 数据转换为 CSV 格式，并提供下载。
流式处理	可以使用 Streams API 逐步加载数据，逐步渲染，避免一次性加载大量数据导致的性能问题。

掌握了这些技巧，你就可以在 Service Worker 中掌控数据流，玩出更多花样，打造高性能、离线可用的 Web 应用。

好了，今天的讲座就到这里。希望大家有所收获，咱们下次再见！