Network Only

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

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

  • Запросы проходят только через сеть. Любые кэшированные версии ресурса игнорируются.
  • Нет хранения в кэше. Ответы не сохраняются в Service Worker кэше, что отличает Network Only от стратегий вроде Cache First или Stale While Revalidate.
  • Обработка ошибок сети. Если сервер недоступен, запрос вернёт ошибку, и её необходимо обрабатывать вручную с помощью блоков try/catch или через методы Workbox.

Применение в Workbox

Для использования Network Only подключается модуль workbox-strategies и создаётся экземпляр стратегии:

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

registerRoute(
  ({ request }) => request.destination === 'script',
  new NetworkOnly()
);

Пояснение к коду:

  • registerRoute позволяет определить правило перехвата запросов.
  • Фильтр { request } => request.destination === 'script' ограничивает стратегию только для JavaScript-файлов.
  • new NetworkOnly() создаёт стратегию, которая не использует кэш и всегда обращается к сети.

Настройка параметров стратегии

Network Only может принимать объект с настройками, хотя их меньше, чем у кэширующих стратегий. Основные параметры:

  • fetchOptions — объект с настройками запроса, который передаётся в fetch. Например, можно указать метод запроса, заголовки, режим и credentials:
new NetworkOnly({
  fetchOptions: {
    credentials: 'include',
    cache: 'no-store',
    mode: 'cors'
  }
});

  • plugins — массив плагинов Workbox, которые могут обрабатывать события запроса и ответа. Примеры плагинов:

    • workbox-expiration — обычно используется с кэшированием, но можно применять для логирования.
    • workbox-cacheable-response — позволяет фильтровать кэшируемые ответы, но в Network Only используется редко.

Сценарии использования

Network Only подходит для случаев, когда данные:

  • Часто обновляются и устаревшие версии недопустимы.
  • Не должны храниться в кэше по соображениям безопасности (например, приватные API-запросы).
  • Должны иметь строгую актуальность, например, при авторизации или работе с банковскими транзакциями.

Примеры:

  1. API-запросы для динамического контента
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkOnly()
);
  1. Авторизация и сессии

Запросы к /login и /logout лучше обрабатывать стратегией Network Only, чтобы гарантировать актуальность данных и предотвращение возможного использования устаревших токенов.

Обработка ошибок и fallback

Поскольку Network Only не использует кэш, при сбоях сети важно организовать fallback-логику:

registerRoute(
  ({ request }) => request.destination === 'image',
  new NetworkOnly({
    plugins: [
      {
        fetchDidFail: async ({ request }) => {
          return caches.match('/images/fallback.png');
        }
      }
    ]
  })
);

В этом примере, если изображение не загружается из сети, возвращается заранее кэшированная заглушка.

Особенности интеграции с другими стратегиями

  • Network Only часто комбинируют с Cache First или Stale While Revalidate на разных маршрутах.
  • Можно использовать разные стратегии для одного типа ресурсов: например, CSS и JS — Network Only, изображения — Cache First.

Поддержка Workbox

Workbox полностью поддерживает стратегию Network Only в последних версиях (6.x и выше). Реализация полностью совместима с Service Worker API и позволяет подключать плагины для расширенной обработки запросов, логирования или аналитики.

Оглавление