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

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

Хотя эта документация в основном сосредоточена на обработке запросов GET в сервисном работнике, могут использоваться и другие методы, такие как POST , PUT или DELETE . Эти методы часто используются для взаимодействия с серверными API для предоставления данных для веб-приложения. Если эти запросы терпят неудачу из-за отсутствия сервисного работника, пользователь должен повторить их вручную, когда снова подключится к сети, а это не то, что пользователи всегда могут помнить.

Если это описывает ваше приложение — и если в нем участвует сервисный работник — в идеале вам следует повторить попытку отправки неудачных запросов, когда пользователь снова подключится к сети. API BackgroundSync предлагает решение этой проблемы. Когда работник службы обнаруживает неудачный сетевой запрос, он может зарегистрироваться для получения события sync , когда браузер обнаружит, что подключение восстановлено. Событие sync может быть доставлено, даже если пользователь ушел со страницы, на которой оно было зарегистрировано, что делает его более эффективным, чем другие методы повтора неудачных запросов.

Workbox абстрагирует этот API с помощью модуля workbox-background-sync , что упрощает использование API BackgroundSync с другими модулями Workbox. Он также реализует запасной вариант для браузеров, которые еще не поддерживают BackgroundSync.

Основное использование

BackgroundSyncPlugin экспортируется из модуля workbox-background-sync и может использоваться для постановки в очередь неудачных запросов и их повторной попытки при возникновении будущих событий sync :

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

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  // An optional third parameter specifies the request method
  'POST'
);

Здесь BackgroundSyncPlugin применяется к маршруту, сопоставляющему запросы POST с маршрутом API, который получает данные JSON. Если пользователь не в сети, BackgroundSyncPlugin повторит запрос, когда пользователь снова окажется в сети, но не более суток.

Расширенное использование

workbox-background-sync также предоставляет класс Queue , экземпляр которого можно создавать и добавлять в него неудачные запросы. Как и в случае с BackgroundSyncPlugin , неудавшиеся запросы сохраняются в IndexedDB и выполняются, когда браузер считает, что соединение восстановлено.

Создание очереди

Чтобы создать очередь, создайте экземпляр объекта Queue со строкой, представляющей имя очереди:

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

const queue = new Queue('myQueueName');

Имя очереди используется как часть имени тега, созданного методом register() предоставляемого глобальным SyncManager . Это также имя, используемое для хранилища объектов , предоставляемого базой данных IndexedDB.

Добавление запросов в очередь

После создания экземпляра Queue вы можете добавить в него неудачные запросы, используя метод pushRequest() :

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

const queue = new Queue('myQueueName');

self.addEventListener('fetch', (event) => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

После добавления в очередь запросы автоматически повторяют попытку, когда сервисный работник получает событие sync , поскольку браузер считает, что сеть снова доступна. Браузеры, которые не поддерживают API BackgroundSync, будут повторять запрос каждый раз при запуске сервисного работника, что является менее эффективным способом повторения неудачного запроса, но является своего рода запасным вариантом.

Тестирование workbox-background-sync

Тестировать поведение фоновой синхронизации может быть непросто, но это можно сделать в Chrome DevTools. На данный момент лучший подход выглядит примерно так:

1. Загрузите страницу, на которой регистрируется ваш сервисный работник.
2. Отключите сетевое соединение вашего компьютера или выключите веб-сервер. Не используйте переключатель автономного режима в Chrome DevTools! Флажок «Автономно» влияет только на запросы со страницы, но запросы сервис-воркера будут продолжать обрабатываться.
3. Выполняйте сетевые запросы, которые должны быть поставлены в очередь с помощью workbox-background-sync . Вы можете проверить запросы, поставленные в очередь, просмотрев Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests .
4. Теперь либо восстановите сетевое подключение, либо снова включите веб-сервер.
5. Вызовите событие ранней sync , выбрав Chrome DevTools > Application > Service Workers . Введите имя тега workbox-background-sync:<your queue name> , где <your queue name> — это заданное вами имя очереди.
6. Нажмите кнопку «Синхронизировать».
   
7. Теперь вы должны увидеть, что ранее неудачные сетевые запросы были повторены и выполнены. В результате хранилище IndexedDB должно быть пустым, поскольку запросы успешно воспроизведены.

Заключение

Использование workbox-background-sync для повтора неудачных сетевых запросов может стать отличным способом улучшить взаимодействие с пользователем и повысить надежность вашего приложения, например, позволяя пользователям повторно отправлять неудачные запросы API, чтобы они не потеряли данные, которые хотели отправить на ваш компьютер. API. Его также можно использовать для заполнения пробелов в ваших собственных данных, например, в аналитике. Фактически, модуль workbox-google-analytics внутренне использует workbox-background-sync для повторения неудачных запросов на отправку данных в Google Analytics.

Независимо от вашего варианта использования, workbox-background-sync упрощает задачи такого рода, улучшая ваш опыт разработчика и предоставляя вам больше возможностей для улучшения пользовательского опыта и функциональности вашего веб-приложения.