Модуль workbox-streams

workbox-streams предоставляет мощные возможности для работы с потоками (Streams) в сервис-воркерах, позволяя управлять загрузкой и обработкой данных в реальном времени. В отличие от стандартных стратегий кэширования Workbox, которые оперируют с целыми ответами, workbox-streams позволяет читать, изменять и возвращать данные частями, что особенно полезно для больших файлов, мультимедиа и потоковых ресурсов.

Основные концепции

Streams API в JavaScript состоит из нескольких ключевых компонентов:

ReadableStream – поток для чтения данных частями.
WritableStream – поток для записи данных.
TransformStream – поток для трансформации данных на лету.

workbox-streams использует эти концепции для реализации middleware в сервис-воркерах, которые могут перехватывать запросы и изменять ответы до того, как они будут отправлены клиенту.

Подключение модуля

Для использования workbox-streams необходимо импортировать его в сервис-воркер:

import { registerRoute } from 'workbox-routing';
import { streamResponse } from 'workbox-streams';

registerRoute – стандартная функция Workbox для перехвата сетевых запросов.
streamResponse – функция для создания потокового ответа с обработчиками.

Создание потокового ответа

streamResponse позволяет задавать массив transformers — функций, которые последовательно изменяют поток данных:

registerRoute(
  ({ request }) => request.destination === 'script',
  ({ request }) => {
    return streamResponse({
      request,
      plugins: [],
      transformers: [
        new HTMLRewriter()
          .on('script', {
            element(element) {
              element.setAttribute('defer', '');
            }
          })
      ]
    });
  }
);

request – исходный запрос.
plugins – стандартные Workbox-плагины кэширования и стратегий, которые могут быть применены к потоковому ответу.
transformers – массив функций или объектов для модификации данных потока.

Transformer функции

Каждый transformer может быть объектом с методами:

start(controller) – вызывается один раз перед началом обработки потока.
transform(chunk, controller) – вызывается для каждого фрагмента данных (chunk).
flush(controller) – вызывается в конце обработки потока.

Пример transformer, который конвертирует все текстовые данные в верхний регистр:

const upperCaseTransformer = {
  transform(chunk, controller) {
    controller.enqueue(new TextEncoder().encode(new TextDecoder().decode(chunk).toUpperCase()));
  }
};

Интеграция с кэшем

workbox-streams позволяет использовать стандартные кэш-плагины Workbox вместе с потоками. Например, можно комбинировать CacheFirst стратегию и потоковую обработку больших файлов:

import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

registerRoute(
  ({ request }) => request.destination === 'image',
  ({ request }) => {
    return streamResponse({
      request,
      plugins: [
        new CacheFirst({
          cacheName: 'images-cache',
          plugins: [
            new CacheableResponsePlugin({ statuses: [0, 200] })
          ]
        })
      ],
      transformers: [
        {
          transform(chunk, controller) {
            // Можно выполнять сжатие изображения или модификацию данных
            controller.enqueue(chunk);
          }
        }
      ]
    });
  }
);

Применение в реальных сценариях

1. Модификация HTML на лету Потоки позволяют изменять HTML-контент перед его отправкой пользователю, например добавлять атрибуты или вставлять скрипты аналитики.

2. Потоковая обработка мультимедиа Можно изменять видеопотоки или аудио на лету, добавлять субтитры, фильтры или адаптивное качество без необходимости загружать весь файл сразу.

3. Сжатие и трансформация данных Подходит для больших JSON или CSV файлов, которые необходимо сжимать или фильтровать по определённым критериям перед отдачей клиенту.

Особенности и ограничения

Работа с потоками требует понимания Streams API и контроля жизненного цикла данных.
Потоки не поддерживают все стандартные плагины Workbox напрямую, некоторые требуют адаптации.
Трансформация данных в реальном времени может увеличить нагрузку на сервис-воркер при обработке больших файлов.