Отладка фоновой синхронизации

Фоновая синхронизация (Background Sync) позволяет веб-приложению откладывать выполнение сетевых запросов до тех пор, пока устройство пользователя не восстановит соединение с интернетом. В библиотеке Workbox она реализуется через модуль workbox-background-sync, который обеспечивает надёжную и автоматическую повторную отправку запросов, когда сеть становится доступной.

Импорт и настройка модуля

Для начала необходимо импортировать класс BackgroundSyncPlugin:

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

Основной параметр конструктора — имя очереди, в которой будут сохраняться запросы, пока они не будут успешно выполнены:

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

Ключевые опции:

  • maxRetentionTime — максимальное время хранения запросов в очереди, после которого они будут отброшены.
  • callbacks — объект с функциями обратного вызова для обработки событий, таких как queueDidReplay, queueDidFail.

Интеграция с Workbox Routing

Фоновая синхронизация чаще всего применяется к POST-запросам. Для этого создаётся стратегия с использованием NetworkOnly, дополненная плагином:

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

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

Особенности:

  • Любой POST-запрос к /api/*.json, не прошедший из-за отсутствия сети, будет помещён в очередь myQueue.
  • Когда соединение восстановится, Workbox автоматически повторно отправит все накопленные запросы.

Отладка очереди Background Sync

Для отладки важно понимать внутреннее состояние очереди. Workbox предоставляет методы работы с очередью через класс Queue:

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

const queue = new Queue('myQueue');

// Проверка количества запросов в очереди
queue.getAll().then(requests => {
  console.log('Запросов в очереди:', requests.length);
});

// Очистка очереди
queue.deleteQueue();

Основные методы для диагностики:

  • queue.getAll() — возвращает все запросы, находящиеся в очереди.
  • queue.replayRequests() — вручную инициирует повторную отправку всех запросов.
  • queue.shiftRequest() — извлекает первый запрос из очереди.
  • queue.unshiftRequest(request) — добавляет запрос в начало очереди.

Логирование событий очереди

Для отслеживания процессов полезно подключить обратные вызовы при создании плагина:

const bgSyncPlugin = new BackgroundSyncPlugin('myQueue', {
  maxRetentionTime: 24 * 60,
  callbacks: {
    queueDidReplay: (queue) => {
      console.log(`Очередь ${queue.name} успешно обработана`);
    },
    queueDidFail: (queue, error) => {
      console.error(`Ошибка при обработке очереди ${queue.name}:`, error);
    }
  }
});

Пояснение:

  • queueDidReplay срабатывает после успешной повторной отправки всех запросов.
  • queueDidFail вызывается при критических ошибках, которые помешали повторной отправке.

Инструменты для тестирования

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

  2. Ручной вызов replayRequests() Позволяет проверить, что все накопленные запросы успешно обрабатываются после восстановления соединения.

  3. Просмотр IndexedDB Workbox хранит очереди в IndexedDB, что даёт возможность анализировать их содержимое через DevTools → Application → IndexedDB → workbox-background-sync.

Рекомендации по отладке

  • Использовать короткие maxRetentionTime на этапе разработки, чтобы быстро проверять повторную отправку.
  • Подключать логирование через callbacks для отслеживания каждого этапа работы очереди.
  • Тестировать как успешные, так и ошибочные сценарии сети, чтобы убедиться, что все запросы либо обрабатываются, либо корректно остаются в очереди.

Расширенные возможности

Workbox позволяет:

  • Создавать несколько очередей для разных типов запросов.
  • Комбинировать BackgroundSyncPlugin с другими плагинами Workbox, например, кешированием через CacheableResponsePlugin.
  • Управлять повторной отправкой запросов с учётом пользовательской логики, например, ограничивать количество повторов или модифицировать тело запроса перед отправкой.

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

Оглавление