Определение доступности сети

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

Проверка состояния сети

Для определения доступности сети в браузере используется объект navigator.onLine. Он возвращает булево значение: true, если устройство имеет доступ к сети, и false, если нет. Однако полагаться только на этот метод не всегда безопасно, так как он сообщает только об общих сетевых подключениях, а не о возможности конкретного запроса.

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

if (navigator.onLine) {
  console.log('Сеть доступна');
} else {
  console.log('Сеть недоступна');
}

Для динамических проверок доступности конкретного ресурса лучше использовать попытку запроса и обработку исключений.

async function checkResource(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    return response.ok;
  } catch (error) {
    return false;
  }
}

Использование Workbox для сетевых запросов

Workbox предлагает стратегии, которые автоматически учитывают доступность сети при обработке запросов:

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

Пример использования NetworkFirst для API-запросов:

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

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 5,
  })
);

networkTimeoutSeconds позволяет задать время ожидания сети. Если за это время ответ не получен, Workbox возвращает кэшированный ресурс, что повышает устойчивость приложения при слабом соединении.

Обработка событий онлайн и оффлайн

Для динамического реагирования на изменения состояния сети используются события online и offline:

window.addEventListener('online', () => {
  console.log('Соединение восстановлено');
});

window.addEventListener('offline', () => {
  console.log('Соединение потеряно');
});

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

Смешанные стратегии с проверкой сети

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

import { CacheFirst } from 'workbox-strategies';

async function fetchWithFallback(request) {
  if (navigator.onLine) {
    try {
      return await fetch(request);
    } catch {
      const cache = await caches.open('offline-cache');
      return cache.match(request);
    }
  } else {
    const cache = await caches.open('offline-cache');
    return cache.match(request);
  }
}

Интеграция с Push и Background Sync

Workbox поддерживает фоновые операции, которые зависят от доступности сети. Background Sync позволяет откладывать отправку данных на сервер до момента, когда сеть снова станет доступной:

import { BackgroundSyncPlugin } from 'workbox-background-sync';

const bgSyncPlugin = new BackgroundSyncPlugin('queueName', {
  maxRetentionTime: 24 * 60, // время хранения в минутах
});

registerRoute(
  /\/submit-form/,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

Это гарантирует, что формы и события, генерируемые пользователем, будут отправлены даже при временной потере сети.

Выводы по определению доступности сети в Workbox

  • Состояние сети можно определять через navigator.onLine и попытки fetch-запросов.
  • Workbox-стратегии автоматически управляют доступностью сети, выбирая кэш или сеть в зависимости от условий.
  • События online и offline позволяют динамически реагировать на изменения соединения.
  • Background Sync и смешанные стратегии обеспечивают надежную работу приложений в условиях нестабильной сети.

Эффективное использование этих инструментов позволяет создавать Progressive Web App с устойчивым поведением вне зависимости от состояния подключения, минимизируя потерю данных и повышая отзывчивость интерфейса.

Оглавление