Настройка NavigationRoute

NavigationRoute в Workbox используется для обработки навигационных запросов в приложениях с одной страницей (SPA). Его основная задача — перехватывать запросы на загрузку HTML-страниц и направлять их на конкретный кэшированный ресурс, чаще всего на главный файл приложения, например index.html. Это позволяет приложению работать оффлайн и корректно загружать SPA-страницы при навигации.

Импорт необходимых модулей

Для работы с NavigationRoute требуется импортировать модули registerRoute и NavigationRoute из Workbox. Также часто используется NetworkFirst или CacheFirst стратегии из workbox-strategies:

import { registerRoute, NavigationRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';
  • registerRoute отвечает за регистрацию маршрутов.
  • NavigationRoute фильтрует навигационные запросы.
  • NetworkFirst — стратегия, при которой сначала идет попытка получить ресурс из сети, а в случае ошибки используется кэш.

Создание NavigationRoute

Основная структура создания NavigationRoute выглядит так:

const navigationHandler = new NetworkFirst({
  cacheName: 'html-cache',
  plugins: [
    // Опциональные плагины
  ],
});

const navigationRoute = new NavigationRoute(navigationHandler, {
  denylist: [/^\/api\//, /^\/admin\//],
  allowlist: [/./],
});

registerRoute(navigationRoute);

Объяснение параметров:

  • navigationHandler — стратегия обработки навигационных запросов, чаще всего NetworkFirst или CacheFirst.
  • denylist — список регулярных выражений для исключения URL из обработки маршрутом. Полезно для API-запросов или административных маршрутов.
  • allowlist — список URL, которые должны обрабатываться маршрутом. Обычно используется /./, чтобы разрешить все навигационные запросы по умолчанию.

Стратегии кэширования для NavigationRoute

Выбор стратегии напрямую влияет на поведение SPA при оффлайн-доступе:

  1. NetworkFirst Подходит для приложений с часто обновляющимся контентом:

    • Сначала пытается загрузить HTML с сети.
    • Если сеть недоступна, используется кэшированный HTML.
    • Обеспечивает актуальность данных, но может быть медленнее при плохом соединении.

  2. CacheFirst Используется, когда HTML редко меняется:

    • Сначала берется кэшированная версия.
    • Сеть используется только для обновления кэша.
    • Обеспечивает мгновенную загрузку, но может устаревать.

  3. StaleWhileRevalidate Комбинированный подход:

    • Возвращает кэш сразу.
    • Параллельно обновляет кэш с сети.
    • Отлично подходит для быстрых загрузок и постепенного обновления.

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

import { CacheFirst } from 'workbox-strategies';

const navigationHandler = new CacheFirst({
  cacheName: 'html-cache',
  plugins: [],
});

const navigationRoute = new NavigationRoute(navigationHandler);
registerRoute(navigationRoute);

Фильтрация запросов

NavigationRoute позволяет точно контролировать, какие навигационные запросы обрабатываются:

  • denylist предотвращает обработку определённых URL.
  • allowlist задаёт URL, которые обязательно будут перехвачены.

Пример:

const navigationRoute = new NavigationRoute(navigationHandler, {
  denylist: [
    /\/api\//,       // Все API-запросы
    /\/admin\//,     // Админские маршруты
    /\.json$/        // JSON файлы
  ]
});

Таким образом, HTML-страницы SPA будут обрабатываться только для нужных маршрутов, а API-запросы и статические JSON-файлы останутся вне кэширования NavigationRoute.

Интеграция с другими маршрутами

Workbox позволяет комбинировать NavigationRoute с другими registerRoute для ресурсов, таких как CSS, JS, изображения. Важно регистрировать NavigationRoute после специфичных маршрутов, чтобы он не перехватывал запросы к статическим файлам:

// Кэширование статических файлов
registerRoute(
  /\.(?:js|css|png|jpg|svg)$/,
  new CacheFirst({ cacheName: 'assets-cache' })
);

// Обработка навигационных запросов SPA
registerRoute(navigationRoute);

Применение в оффлайн-приложениях

NavigationRoute — ключевой инструмент для оффлайн-доступа SPA:

  • Позволяет отображать приложение при отсутствии сети.
  • Обеспечивает корректную работу маршрутизации внутри SPA.
  • В сочетании с стратегиями кэширования гарантирует быстрый отклик и актуальные данные.

Полезные плагины Workbox для NavigationRoute

  • ExpirationPlugin — ограничивает размер кэша HTML и срок хранения.
  • BroadcastUpdatePlugin — позволяет уведомлять клиент о обновлении кэша.
  • CacheableResponsePlugin — контролирует, какие ответы кэшировать (по статусу или заголовкам).

Пример с плагинами:

import { ExpirationPlugin, CacheableResponsePlugin } from 'workbox-plugins';

const navigationHandler = new NetworkFirst({
  cacheName: 'html-cache',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 10,
      maxAgeSeconds: 24 * 60 * 60, // 1 день
    }),
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

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

Оглавление