Ponawiam prośby, gdy znów będziesz online

Gdy wysyłasz żądania do serwera WWW, porażka jest możliwym. Przyczyną może być utrata połączenia przez użytkownika lub wyłączenie serwera zdalnego.

Ta dokumentacja dotyczy głównie obsługi żądań GET w skryptach service worker, ale mogą też być używane inne metody, np. POST, PUT i DELETE. Te metody są często używane do komunikowania się z interfejsami API backendu w celu dostarczania danych aplikacji internetowej. Jeśli żądania te okażą się nieskuteczne z powodu braku skryptu service worker, użytkownik będzie musiał ponowić ich ręczne wykonanie, gdy ponownie połączy się z siecią. Użytkownicy zwykle o tym nie pamiętają.

Jeśli to opisuje Twoją aplikację – i jednocześnie znajduje się w niej skrypt service worker, najlepiej spróbuj ponownie wysłać nieudane żądania, gdy użytkownik będzie z powrotem online. Rozwiązanie tego problemu można rozwiązać za pomocą interfejsu BackgroundSync API. Gdy skrypt service worker wykryje nieudane żądanie sieciowe, może zarejestrować się, aby otrzymać zdarzenie sync, gdy przeglądarka wykryje, że łączność została zwrócona. Zdarzenie sync może zostać dostarczone nawet wtedy, gdy użytkownik opuścił stronę, na której zostało zarejestrowane, dzięki czemu jest bardziej skuteczne niż inne metody ponawiania prób zakończonych niepowodzeniem.

Workbox wyodrębnia ten interfejs API za pomocą modułu workbox-background-sync, co ułatwia korzystanie z interfejsu BackgroundSync API z innymi modułami Workbox. Wdraża ona również strategię zastępczą dla przeglądarek, które jeszcze nie obsługują funkcji BackgroundSync.

Podstawowe użycie

Moduł BackgroundSyncPlugin jest eksportowany z modułu workbox-background-sync i można go użyć do umieszczenia w kolejce nieudanych żądań i ponowienia ich po uruchomieniu przyszłych zdarzeń 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'
);

W tym przypadku BackgroundSyncPlugin jest stosowany do trasy pasującej do żądań POST do trasy interfejsu API, która pobiera dane JSON. Jeśli użytkownik jest offline, BackgroundSyncPlugin spróbuje ponownie przesłać żądanie, gdy użytkownik będzie ponownie online, ale tylko w ciągu maksymalnie 1 dnia.

Zaawansowane użycie

workbox-background-sync udostępnia też klasę Queue, do której możesz utworzyć instancję i dodać do niej nieudane żądania. Tak samo jak w przypadku BackgroundSyncPlugin, nieudane żądania są przechowywane w IndexedDB i są sprawdzane, gdy przeglądarka uzna, że łączność została przywrócona.

Tworzenie kolejki

Aby utworzyć kolejkę, utwórz instancję obiektu Queue z ciągiem reprezentującym nazwę kolejki:

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

const queue = new Queue('myQueueName');

Nazwa kolejki jest częścią nazwy tagu tworzonej przez metodę register() dostarczaną przez globalny tag SyncManager. Jest to również nazwa używana dla magazynu obiektów udostępniana przez bazę danych IndexedDB.

Dodawanie żądań do kolejki

Po utworzeniu instancji Queue możesz dodawać do niej nieudane żądania przy użyciu metody 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());
});

Po dodaniu do kolejki żądania są automatycznie ponawiane, gdy skrypt service worker otrzyma zdarzenie sync, ponieważ według przeglądarki sieć jest ponownie dostępna. Przeglądarki, które nie obsługują interfejsu BackgroundSync API, będą ponawiać żądanie przy każdym uruchomieniu skryptu service worker, co jest mniej skutecznym sposobem ponawiania nieudanego żądania, ale stanowi alternatywną metodę sortowania.

Testowanie: workbox-background-sync

Testowanie działania synchronizacji w tle może być trudne, ale można to zrobić w Narzędziach deweloperskich w Chrome. Obecnie najlepsza metoda wygląda mniej więcej tak:

  1. Wczytaj stronę, która rejestruje skrypt service worker.
  2. Wyłącz połączenie sieciowe komputera lub wyłącz serwer WWW. Nie używaj przełącznika trybu offline w Narzędziach deweloperskich w Chrome. Pole wyboru offline ma wpływ tylko na żądania ze strony, ale żądania skryptu service worker będą nadal realizowane.
  3. Wysyłaj żądania sieciowe, które powinny znaleźć się w kolejce z workbox-background-sync. Żądania, które zostały umieszczone w kolejce, możesz sprawdzić w usłudze Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests.
  4. Przywróć połączenie z siecią lub włącz serwer WWW.
  5. Wymuś wczesne zdarzenie sync, przechodząc do Chrome DevTools > Application > Service Workers. Wpisz nazwę tagu workbox-background-sync:<your queue name>, gdzie <your queue name> to nazwa ustawionej kolejki.
  6. Kliknij przycisk „Synchronizuj”.
    Zrzut ekranu przedstawiający narzędzie do synchronizacji w tle widoczne w panelu aplikacji Narzędzi deweloperskich w Chrome. Zdarzenie synchronizacji jest określone dla kolejki „myQueueName” w module „workbox-background-sync”.
  7. Powinny się wyświetlić ponownie nieudane żądania sieciowe i ponowne ich wykonanie. W związku z tym magazyn IndexedDB powinien być pusty, ponieważ żądania zostały ponownie odtworzone.

Podsumowanie

Używanie funkcji workbox-background-sync do ponawiania nieudanych żądań sieciowych może być świetnym sposobem na zwiększenie wygody i niezawodności aplikacji, na przykład umożliwienie użytkownikom ponownego przesyłania nieudanych żądań do interfejsu API, aby nie utracić danych wysyłanych do interfejsu API. Narzędzie to może też służyć do wypełniania luk we własnych danych, np. w statystykach. W rzeczywistości moduł workbox-google-analytics używa wbudowanego w ten sposób workbox-background-sync, aby ponawiać nieudane żądania wysłania danych do Google Analytics.

Niezależnie od tego, czego używasz, workbox-background-sync upraszcza tego typu zadania, zwiększając komfort programistów i dając Ci więcej możliwości usprawnienia działania i działania Twojej aplikacji internetowej.