Network First

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

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

  1. Попытка запроса с сети: Когда приходит запрос, стратегия первым делом пытается выполнить его через сеть. Если сервер отвечает успешно, данные возвращаются пользователю и одновременно сохраняются в кэш для последующего использования.

  2. Использование кэша при сбое сети: Если сетевой запрос не удался (например, отсутствует интернет-соединение), Workbox ищет ответ в кэше. Если кэш содержит подходящий ресурс, он возвращается вместо сетевого ответа.

  3. Обновление кэша: Каждый успешный сетевой ответ обновляет кэш. Это позволяет сохранять актуальные версии ресурсов для будущих офлайн-запросов.

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

Для использования стратегии Network First необходимо импортировать соответствующий модуль из Workbox:

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

После этого создаётся правило для маршрута:

registerRoute(
  ({ request }) => request.destination === 'document' || request.destination === 'script',
  new NetworkFirst({
    cacheName: 'dynamic-content-cache',
    networkTimeoutSeconds: 3,
    plugins: [
      // Плагины можно использовать для управления кэшем, логирования или ограничения размера
    ],
  })
);

Пояснения параметров:

  • cacheName — имя кэша, где будут храниться ресурсы. Рекомендуется создавать отдельный кэш для разных типов данных.
  • networkTimeoutSeconds — время ожидания ответа сети. Если сервер не отвечает в течение указанного времени, Workbox использует кэш.
  • plugins — массив плагинов для расширения функциональности, например, ExpirationPlugin для ограничения числа элементов в кэше или их срока жизни.

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

  1. Динамическая загрузка HTML и JS: Стратегия Network First подходит для основных HTML-страниц и скриптов, где важна актуальность данных. В случае отсутствия сети пользователь получит последнюю закэшированную версию страницы.

  2. API-запросы: Для API-запросов, где данные часто обновляются, Network First обеспечивает быстрый доступ к свежей информации и автоматически кэширует результаты для офлайн-режима:

registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 5,
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 3600, // один час
      }),
    ],
  })
);

Отличие от Cache First и Stale While Revalidate

  • Cache First: приоритет отдаётся кэшу, сеть используется только при отсутствии ресурса в кэше. Хорошо подходит для статических ресурсов, таких как изображения и стили.
  • Stale While Revalidate: возвращает кэш мгновенно, а сеть обновляет ресурс в фоновом режиме. Идеально для часто запрашиваемых, но не критично актуальных данных.
  • Network First: основная цель — свежие данные, кэш используется как резерв. Отличается большей задержкой при отсутствии сети, но гарантирует актуальность данных при доступной сети.

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

  • Разделение кэшей по типу контента: HTML, CSS, JS и API лучше хранить в отдельных кэшах для более гибкого управления и очистки устаревших ресурсов.
  • Использование networkTimeoutSeconds: помогает предотвратить длительные блокировки при медленной сети, позволяя пользователю получать закэшированные данные.
  • Плагины Expiration и CacheableResponse: позволяют ограничивать количество элементов в кэше и фильтровать успешные ответы для хранения.

Типичные сценарии применения

  • Главные страницы сайта, где критично показывать свежий контент.
  • Приложения с динамическими данными, такими как новостные ленты, социальные сети, API-панели.
  • Обеспечение офлайн-доступа для данных, которые должны быть доступны даже при временном отсутствии интернет-соединения.

Network First сочетает надежность и актуальность, обеспечивая пользователю современные веб-приложения с корректным офлайн-поведением.

Оглавление