RangeRequestsPlugin

RangeRequestsPlugin — это плагин библиотеки Workbox, предназначенный для обработки HTTP-запросов с заголовком Range. Он позволяет эффективно отдавать клиенту только часть ресурса, что особенно актуально для потокового воспроизведения мультимедиа, таких как аудио- и видеофайлы, а также больших бинарных данных.

Основные принципы работы

HTTP-заголовок Range используется для указания диапазона байтов, которые клиент хочет получить от сервера. Например:

Range: bytes=0-1023

означает, что клиент запрашивает первые 1024 байта ресурса.

Workbox, с помощью RangeRequestsPlugin, позволяет перехватывать такие запросы на уровне Service Worker и управлять отдачей частичных данных из кэша или с сервера. Это повышает скорость загрузки и экономит трафик, так как не требуется повторно загружать весь файл при воспроизведении медиаконтента.

Подключение и настройка

Для использования RangeRequestsPlugin необходимо импортировать его из Workbox:

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { RangeRequestsPlugin } from 'workbox-range-requests';

Далее создается стратегия кэширования, в которую подключается плагин:

registerRoute(
  ({ request }) => request.destination === 'video',
  new CacheFirst({
    cacheName: 'video-cache',
    plugins: [
      new RangeRequestsPlugin(),
    ],
  })
);

Ключевые моменты настройки:

  • destination фильтр: позволяет выбирать, для каких типов ресурсов активировать поддержку диапазонов (video, audio, image, font и др.).
  • cacheName: имя кэша, где будут храниться частичные ресурсы.
  • plugins: подключение RangeRequestsPlugin в массив плагинов выбранной стратегии.

Обработка частичных запросов

RangeRequestsPlugin перехватывает запросы с заголовком Range и:

  1. Проверяет наличие запрошенного диапазона в кэше.
  2. Если диапазон найден, возвращает соответствующую часть ресурса.
  3. Если диапазон отсутствует, загружает необходимую часть с сервера и кэширует её для последующих запросов.

Пример логики работы при запросе диапазона:

Запрос: bytes=1000-1999
Кэш: bytes 0-999, 2000-2999
Результат: загрузка байтов с 1000 по 1999 с сервера, добавление их в кэш

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

  • Поддержка только GET запросов: RangeRequestsPlugin работает исключительно с GET запросами.
  • Полная кэшированная копия: для корректной работы с произвольными диапазонами рекомендуется хранить весь ресурс целиком или использовать стратегии кэширования с возможностью объединения диапазонов.
  • Не поддерживает динамическое сжатие: если сервер возвращает сжатые данные (gzip/brotli), RangeRequestsPlugin может корректно работать только с несжатыми ресурсами.

Примеры использования

Стриминг видео с кэшем:

registerRoute(
  ({ request }) => request.destination === 'video',
  new CacheFirst({
    cacheName: 'video-cache',
    plugins: [
      new RangeRequestsPlugin(),
    ],
  })
);

Загрузка аудиофайлов по частям:

registerRoute(
  ({ request }) => request.destination === 'audio',
  new CacheFirst({
    cacheName: 'audio-cache',
    plugins: [
      new RangeRequestsPlugin(),
    ],
  })
);

В обоих случаях RangeRequestsPlugin обеспечивает передачу только нужного диапазона, минимизируя задержки и снижая нагрузку на сеть.

Советы по оптимизации

  • При работе с крупными видеофайлами рекомендуется использовать CacheFirst стратегию для снижения повторных сетевых запросов.
  • Для динамических или редко используемых ресурсов можно комбинировать NetworkFirst стратегию с RangeRequestsPlugin.
  • Хранение частичных диапазонов в кэше следует планировать с учётом размера и частоты обращения к ресурсам, чтобы не исчерпать доступное место.

RangeRequestsPlugin является мощным инструментом для оптимизации загрузки больших файлов, потокового медиаконтента и экономии сетевого трафика. Он интегрируется с существующими стратегиями Workbox и позволяет легко расширять функционал Service Worker для современных веб-приложений.

Оглавление