skrzynka robocza-synchronizacja-w tle

Czasami podczas wysyłania danych na serwer WWW żądania mogą nie zostać zrealizowane. it może to wynikać z tego, że użytkownik utracił połączenie lub serwer nie działa; W obu przypadkach warto spróbować wysłać żądania ponownie później.

Nowy BackgroundSync API to idealne rozwiązanie tego problemu. Gdy skrypt service worker wykryje, że nie udało się zrealizować żądania sieciowego, można zarejestrować się, aby odebrać zdarzenie sync, który jest dostarczany, gdy przeglądarka uzna, że połączenie zostało przywrócone. Pamiętaj, że zdarzenie synchronizacji może zostać dostarczone, nawet jeśli użytkownik opuści dzięki czemu jest znacznie skuteczniejszy niż tradycyjna metoda ponawianie nieudanych żądań.

Synchronizacja w tle ułatwia korzystanie z interfejsu BackgroundSync API i integrowanie jego użycia z innymi modułami Workbox. it implementuje strategię awaryjną dla przeglądarek, które nie stosują jeszcze BackgroundSync.

W przeglądarkach, które obsługują interfejs BackgroundSync API, odtwarzanie automatycznie się nie powiedzie zapytań w Twoim imieniu na interwał zarządzany przez przeglądarkę, prawdopodobnie jest używany wykładniczy czas do ponowienia między próbami ponownego odtworzenia. W przeglądarkach, natywnie nie obsługują interfejsu BackgroundSync API, Synchronizacja w tle będzie automatycznie próbować ponownie odtworzyć za każdym razem, gdy skrypt service worker się uruchamia.

Podstawowe wykorzystanie

Najłatwiejszym sposobem korzystania z synchronizacji w tle jest użycie funkcji Plugin, która Automatycznie dodawaj nieudane żądania do kolejki i ponawiaj je, gdy w przyszłości sync zdarzeń.

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],
  }),
  'POST'
);

BackgroundSyncPlugin łączy się z Wywołanie zwrotne wtyczki fetchDidFail oraz Funkcja fetchDidFail jest wywoływana tylko w przypadku zgłoszonego wyjątku, najprawdopodobniej na awarię sieci. Oznacza to, że żądania nie będą ponawiane, jeśli występuje odebrano odpowiedź z Stan błędu 4xx lub 5xx. Jeśli chcesz ponownie uruchomić wszystkie żądania, które zakończyły się np. stanem 5xx, możesz to zrobić przez dodanie wtyczki fetchDidSucceed do strategii.

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

Zaawansowane

Synchronizacja w tle z Workbox udostępnia też klasę Queue, której tworzyć i dodawać nieudane żądania do instancji. Nieudane żądania są przechowywane. w IndexedDB i są ponawiane, gdy przeglądarka spróbuje odzyskać połączenie (tj. gdy otrzyma zdarzenie synchronizacji).

Tworzenie kolejki

Aby utworzyć kolejkę synchronizacji w tle Workbox, musisz ją za pomocą nazwa kolejki (musi być unikalna origin):

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

const queue = new Queue('myQueueName');

Nazwa kolejki jest częścią nazwy tagu, która uzyskuje register()-ed przez cały świat SyncManager Jest służy także jako Nazwa składnicy obiektów dla w bazie danych IndexedDB.

Dodawanie żądania do kolejki

Po utworzeniu instancji kolejki możesz dodawać do niej nieudane żądania. Aby dodać nieudane żądanie, wywołaj metodę .pushRequest(). Przykład: ten kod wychwytuje wszystkie nieudane żądania i dodaje je do kolejki:

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 żądanie jest automatycznie ponawiane, gdy skrypt service worker odbiera zdarzenie sync (które jest realizowane, gdy przeglądarka uważa, że połączenie zostało przywrócone). Przeglądarki, które nie obsługują Interfejs BackgroundSync API będzie ponawiać próby kolejki za każdym razem, gdy zostanie uruchomiony skrypt service worker dla początkujących. Wymaga to, aby strona kontrolująca skrypt service worker więc nie będzie tak skuteczna.

Testowanie synchronizacji w tle Workbox

Testowanie funkcji BackgroundSync jest nieco nieintuicyjne i trudne z wielu powodów.

Aby przetestować implementację, najlepiej wykonaj te czynności:

1. Wczytaj stronę i zarejestruj skrypt service worker.
2. Wyłącz sieć komputera lub wyłącz serwer WWW.
   • NIE UŻYWAJ NARZĘDZIA CHROME DEVTOOLS OFFLINE. Pole wyboru offline w Narzędzia deweloperskie mają wpływ tylko na żądania ze strony. Żądania skryptu Service Worker będzie nadal obowiązywać.
3. Wysyłaj żądania sieciowe, które powinny znaleźć się w kolejce za pomocą synchronizacji w tle z Workbox.
   • Aby sprawdzić, czy żądania znajdują się w kolejce, zajrzyj do Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
4. Następnie włącz serwer sieciowy lub 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 powinna być wartość <your queue name> nazwę kolejki i kliknij „Synchronizuj”, Przycisk

   

6. Powinny pojawić się żądania sieci dla nieudanych żądań. dane IndexedDB powinny być teraz puste, ponieważ żądania zostały udało się odtworzyć ponownie.