Интеграция Background Sync с формами и API-вызовами

Background Sync позволяет сервис-воркерам задерживать сетевые запросы и повторно отправлять их при восстановлении соединения с интернетом. В Workbox эта функциональность реализуется через модуль workbox-background-sync, который предоставляет удобный API для создания очередей и управления повторными отправками запросов.

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

Создание очереди для синхронизации

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

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

Интеграция с формами

Background Sync особенно полезен для форм, данные которых необходимо отправить на сервер, даже если пользователь временно потерял соединение.

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

Принцип работы:

  • Запрос на сервер перехватывается сервис-воркером.
  • Если соединение отсутствует, запрос помещается в очередь.
  • После восстановления сети сервис-воркер автоматически повторяет отправку.

Настройка обратного вызова при успешной отправке

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

formQueue.onS ync = async ({ queue }) => {
  let entry;
  while ((entry = await queue.shiftRequest())) {
    try {
      await fetch(entry.request);
      console.log('Форма успешно отправлена:', entry.request.url);
    } catch (error) {
      console.error('Ошибка при повторной отправке формы:', error);
      await queue.unshiftRequest(entry);
      break;
    }
  }
};

shiftRequest извлекает запрос из очереди, а unshiftRequest возвращает его обратно при неудаче. Это гарантирует, что запросы не теряются при временных проблемах с сетью.

Работа с API-вызовами

Background Sync удобно использовать для любых POST-запросов к API, где важна гарантированная доставка данных.

registerRoute(
  /\/api\/update-data/,
  new NetworkOnly({
    plugins: [formQueue]
  }),
  'POST'
);

Рекомендации:

  1. Идентификация запросов: Для сложных API рекомендуется добавлять уникальный идентификатор к каждому запросу, чтобы избежать дублирования данных на сервере.
  2. Обработка ошибок: В onSync можно реализовать стратегию повторных попыток с экспоненциальной задержкой.
  3. Лимит очереди: Установка maxRetentionTime предотвращает бесконечное накопление старых запросов.

Локальное хранение данных перед отправкой

Для приложений с формами и сложными объектами данных полезно комбинировать Background Sync с IndexedDB или другими локальными хранилищами. Это позволяет:

  • Сохранять заполненные формы локально при отсутствии сети.
  • Отправлять их в очередь синхронизации по мере восстановления соединения.
async function saveFormLocally(formData) {
  const db = await openDB('formDB', 1, {
    upgrade(db) {
      db.createObjectStore('forms', { keyPath: 'id', autoIncrement: true });
    }
  });
  await db.add('forms', formData);
}

Отладка и мониторинг

Workbox предоставляет встроенные инструменты для проверки состояния очередей и синхронизации:

formQueue.getAll().then(entries => {
  console.log('Текущие запросы в очереди:', entries);
});

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

Практические советы по использованию

  • Разделять очереди для разных типов запросов: формы, комментарии, действия пользователя. Это повышает управляемость и предотвращает блокировку важных данных.
  • Настраивать maxRetentionTime с учётом специфики приложения. Для критичных данных стоит использовать более длительные значения.
  • Использовать события sync не только для повторной отправки, но и для уведомления пользователя о восстановлении соединения и успешной отправке данных.

Background Sync в сочетании с Workbox позволяет создавать надёжные веб-приложения, обеспечивающие сохранность пользовательских данных и непрерывную работу интерфейса даже при нестабильной сети.

Оглавление