Типы и интерфейсы Workbox

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

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

Ключевыми элементами Workbox являются:

  • Routing (маршрутизация запросов) Позволяет направлять сетевые запросы через заданные стратегии кэширования. Каждое правило маршрутизации описывается маршрутом, который состоит из регулярного выражения или функции фильтрации URL и стратегии кэширования.

  • Strategies (стратегии кэширования) Определяют, как приложение обрабатывает запросы и хранит ресурсы. Workbox предоставляет готовые стратегии, такие как:

    • CacheFirst — сначала проверяет кэш, затем сеть.
    • NetworkFirst — сначала проверяет сеть, при неудаче — кэш.
    • StaleWhileRevalidate — отдаёт кэшированные данные, обновляя их на фоне.
    • NetworkOnly и CacheOnly — простые стратегии для исключительного использования сети или кэша.

  • Precaching (предварительное кэширование) Позволяет кэшировать статические ресурсы во время установки сервис-воркера. Это гарантирует доступность критически важных файлов даже в оффлайн-режиме.

  • Plugins (плагины) Дополняют стратегии кэширования дополнительной логикой: обработка ошибок, управление сроком жизни кэша, фильтрация MIME-типов.

Интерфейсы Workbox

WorkboxRouting

Интерфейс для настройки маршрутизации запросов. Основные методы:

  • registerRoute(matchCallback, handler, method) Создаёт маршрут.

    • matchCallback — функция, проверяющая URL запроса.
    • handler — стратегия кэширования или кастомная функция.
    • method — HTTP-метод (по умолчанию 'GET').

  • setDefaultHandler(handler) Определяет стратегию по умолчанию для запросов, не попавших под конкретные маршруты.

  • setCatchHandler(handler) Позволяет обрабатывать ошибки сетевых запросов, например, отдавать запасные страницы при недоступной сети.

WorkboxPrecaching

Интерфейс для управления предварительным кэшированием. Ключевые методы:

  • precacheAndRoute(manifest) Регистрирует ресурсы из манифеста для кэширования и создаёт маршруты для их отдачи.

    • manifest — массив объектов с полями url и revision (для версионирования).

  • addRoute(url, strategy) Создаёт маршрут для конкретного ресурса, используя заданную стратегию.

  • cleanupOutdatedCaches() Удаляет устаревшие кэши, чтобы контролировать объём хранилища.

WorkboxStrategies

Предоставляет реализацию стандартных стратегий кэширования. Каждая стратегия имеет общие параметры:

  • cacheName — имя кэша, в котором будут храниться ресурсы.
  • plugins — массив плагинов, влияющих на процесс кэширования.
  • fetchOptions — дополнительные опции для сетевых запросов.
  • matchOptions — опции поиска ресурсов в кэше.

Пример использования стратегии CacheFirst:

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

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      {
        cacheWillUpdate: async ({response}) => response.status === 200 ? response : null
      }
    ]
  })
);
Плагины Workbox

Плагины расширяют возможности стратегий. Основные интерфейсы:

  • Lifecycle Plugins — обработка событий установки, активации, удаления кэшей.
  • Cache Plugins — управление кэшем: проверка сроков хранения, очистка устаревших элементов.
  • Fetch Plugins — изменение запроса или ответа: добавление заголовков, фильтрация MIME-типов.

Пример плагина, ограничивающего срок хранения кэша:

import {ExpirationPlugin} from 'workbox-expiration';

const imageCachePlugin = new ExpirationPlugin({
  maxEntries: 50,
  maxAgeSeconds: 7 * 24 * 60 * 60, // неделя
});
Event Listeners в сервис-воркере

Workbox упрощает работу с событиями сервис-воркера:

  • self.addEventListener('install', callback) Используется для предварительного кэширования ресурсов.
  • self.addEventListener('activate', callback) Чистит устаревшие кэши и завершает установку.
  • self.addEventListener('fetch', callback) Позволяет перехватывать сетевые запросы и направлять их через маршруты Workbox.

Дополнительные возможности

  • Routing с регулярными выражениями и функциями Позволяет фильтровать запросы по URL с высокой точностью. Можно задать сложные условия, например, кэшировать только файлы с расширением .js и URL, содержащие cdn.

  • Комбинация стратегий Можно использовать разные стратегии для разных типов ресурсов:

    • JS и CSS — StaleWhileRevalidate
    • Изображения — CacheFirst
    • API-запросы — NetworkFirst

  • Версионирование кэша Ключевой элемент стабильности приложения. Использование поля revision в precaching гарантирует, что браузер обновит ресурсы при изменении версии файла.

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

Оглавление