Как реализовать offline-first и recovery-сценарий при потере сети?

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

Ключевые компоненты реализации

• Service Worker: Скрипт, работающий в фоне браузера. Он выступает в роли прокси-сервера, перехватывая сетевые запросы. Его основная задача в offline-first — обслуживать запросы из кэша, когда сеть недоступна.
• Кэширование (Cache API): Используется для хранения статических ресурсов (HTML, CSS, JS, изображения) и даже ответов API. Стратегии кэширования (например, Cache-First, Network-First) определяют, откуда брать данные в первую очередь.
• Локальное хранилище данных (IndexedDB): Для сохранения пользовательских данных (форм, настроек, состояния приложения) используется IndexedDB — мощная клиентская NoSQL база данных. Она предпочтительнее localStorage для работы с большими объемами структурированных данных.
• Фоновая синхронизация (Background Sync API): Позволяет отложить отправку данных на сервер до момента восстановления сети. Пользователь может совершить действие офлайн, а Service Worker отправит его позже, автоматически.

Практический пример: Сохранение заметки офлайн

Рассмотрим простое приложение для заметок. При потере сети, новая заметка должна сохраниться локально, а при восстановлении соединения — отправиться на сервер.

// 1. Регистрация Service Worker в основном скрипте
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// 2. Сохранение заметки в IndexedDB при отправке формы
async function saveNote(noteData) {
  // Проверяем онлайн-статус
  if (!navigator.onLine) {
    // Сохраняем в локальную базу
    await saveToIndexedDB('pendingNotes', noteData);
    // Регистрируем задачу на фоновую синхронизацию
    if ('sync' in registration) {
      await registration.sync.register('sync-notes');
    }
    alert('Заметка сохранена локально и будет отправлена позже.');
  } else {
    // Если онлайн — отправляем сразу
    await sendToServer(noteData);
  }
}

// 3. В Service Worker (sw.js) обрабатываем фоновую синхронизацию
self.addEventListener('sync', event => {
  if (event.tag === 'sync-notes') {
    event.waitUntil(syncNotes()); // Функция отправки данных из IndexedDB
  }
});

// 4. Стратегия кэширования для статических файлов (Cache-First)
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Recovery-сценарий и обработка конфликтов

Восстановление (recovery) — это не просто отправка накопленных данных. Необходимо предусмотреть:

• Очередь операций: Данные для отправки должны храниться в порядке их создания.
• Обработку конфликтов: Если данные на сервере изменились, пока клиент был офлайн, нужна стратегия разрешения конфликтов (например, "последний выигрывает" или ручное слияние).
• Уведомление пользователя: Интерфейс должен информировать о статусе синхронизации ("Синхронизация...", "Все данные актуальны").

Вывод: Подход offline-first с recovery-сценарием стоит применять в приложениях, где непрерывность работы критична (мобильные приложения, инструменты для полевых работ, редакторы). Он значительно улучшает пользовательский опыт, делая приложение устойчивым к сбоям сети.