Anfragen wiederholen, wenn wieder online

Wenn Sie Anfragen an einen Webserver senden, können Fehler auftreten. Möglicherweise hat der Nutzer die Verbindung unterbrochen oder der Remoteserver ist ausgefallen.

Während sich diese Dokumentation hauptsächlich auf die Verarbeitung von GET-Anfragen in einem Service Worker konzentriert, können andere Methoden wie POST, PUT oder DELETE ins Spiel kommen. Diese Methoden werden häufig verwendet, um mit Back-End-APIs zu kommunizieren, um Daten für eine Webanwendung bereitzustellen. Wenn diese Anfragen ohne Service Worker fehlschlagen, muss der Nutzer sie manuell wiederholen, sobald er wieder online ist. Das müssen Nutzer möglicherweise nicht immer tun.

Wenn dies auf Ihre Anwendung zutrifft und ein Service Worker vorhanden ist, sollten Sie das Senden fehlgeschlagener Anfragen idealerweise wiederholen, sobald der Nutzer wieder online ist. Die BackgroundSync API bietet eine Lösung für dieses Problem. Wenn ein Service Worker eine fehlgeschlagene Netzwerkanfrage erkennt, kann er sich für den Empfang eines sync-Ereignisses registrieren, wenn der Browser feststellt, dass die Verbindung wiederhergestellt wurde. Das sync-Ereignis kann auch dann gesendet werden, wenn der Nutzer die Seite verlassen hat, auf der es registriert wurde. Dadurch ist es effektiver als andere Methoden zum Wiederholen fehlgeschlagener Anfragen.

Workbox abstrahiert diese API mit dem workbox-background-sync-Modul, wodurch die BackgroundSync API einfacher mit anderen Workbox-Modulen verwendet werden kann. Außerdem wird eine Fallback-Strategie für Browser implementiert, die BackgroundSync noch nicht unterstützen.

Grundlegende Nutzung

Die BackgroundSyncPlugin wird aus dem Modul workbox-background-sync exportiert und kann verwendet werden, um fehlgeschlagene Anfragen in die Warteschlange zu stellen und sie zu wiederholen, wenn zukünftige sync-Ereignisse ausgelöst werden:

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'
);

Hier wird BackgroundSyncPlugin auf eine Route angewendet, die POST-Anfragen an eine API-Route anwendet, die JSON-Daten abruft. Wenn der Nutzer offline ist, wiederholt BackgroundSyncPlugin die Anfrage, sobald er wieder online ist, jedoch nur noch einen Tag lang.

Fortgeschrittene Nutzung

workbox-background-sync bietet auch eine Queue-Klasse, die Sie instanziieren und fehlgeschlagene Anfragen hinzufügen können. Wie auch bei BackgroundSyncPlugin werden die fehlgeschlagenen Anfragen in IndexedDB gespeichert und versucht, wenn der Browser feststellt, dass die Verbindung wiederhergestellt ist.

Warteschlange erstellen

Instanziieren Sie zum Erstellen einer Warteschlange ein Queue-Objekt mit einem String, der den Warteschlangennamen darstellt:

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

const queue = new Queue('myQueueName');

Der Warteschlangenname wird als Teil des Tag-Namens verwendet, der mit der Methode register() erstellt wird, die von der globalen SyncManager bereitgestellt wird. Es ist auch der Name, der für den von der IndexedDB-Datenbank bereitgestellten Objektspeicher verwendet wird.

Anfragen zur Warteschlange hinzufügen

Nachdem Sie die Instanz Queue erstellt haben, können Sie ihr mit der Methode pushRequest() fehlgeschlagene Anfragen hinzufügen:

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());
});

Nach dem Hinzufügen zur Warteschlange werden die Anfragen automatisch wiederholt, wenn der Service Worker das Ereignis sync empfängt, da der Browser glaubt, dass das Netzwerk wieder verfügbar ist. Browser, die die BackgroundSync API nicht unterstützen, wiederholen die Anfrage bei jedem Start des Service Workers. Dies stellt zwar eine weniger effektive Methode zum Wiederholen einer fehlgeschlagenen Anfrage dar, ist jedoch ein Fallback.

workbox-background-sync wird getestet

Das Verhalten der Hintergrundsynchronisierung zu testen, kann schwierig sein, kann aber in den Chrome-Entwicklertools durchgeführt werden. Der aktuelle beste Ansatz sieht ungefähr so aus:

  1. Laden Sie eine Seite, auf der Ihr Service Worker registriert ist.
  2. Deaktivieren Sie die Netzwerkverbindung Ihres Computers oder Ihren Webserver. Verwenden Sie nicht die Ein-/Aus-Schaltfläche für den Offlinezugriff in den Chrome-Entwicklertools. Das Kontrollkästchen "Offline" wirkt sich nur auf Anfragen von der Seite aus, Service Worker-Anfragen werden jedoch weiterhin ausgeführt.
  3. Stellen Sie Netzwerkanfragen, die mit workbox-background-sync in die Warteschlange gestellt werden sollen. Sie können die Anfragen in der Warteschlange prüfen, indem Sie in Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests nachsehen.
  4. Stellen Sie nun entweder die Netzwerkverbindung wieder her oder aktivieren Sie Ihren Webserver wieder.
  5. Erzwingen Sie ein frühes sync-Ereignis, indem Sie Chrome DevTools > Application > Service Workers aufrufen. Geben Sie den Tag-Namen workbox-background-sync:<your queue name> ein, wobei <your queue name> der Name der festgelegten Warteschlange ist.
  6. Klicken Sie auf die Schaltfläche „Synchronisieren“.
    Screenshot des Dienstprogramms zur Hintergrundsynchronisierung im Anwendungsbereich der Chrome-Entwicklertools. Das Synchronisierungsereignis wird für eine Warteschlange von „myQueueName“ für das Modul „workbox-Background-sync“ angegeben.
  7. Sie sollten jetzt sehen, dass zuvor fehlgeschlagene Netzwerkanfragen wiederholt wurden und ausgeführt werden. Daher sollte der IndexedDB-Speicher leer sein, da die Anfragen erfolgreich wiederholt wurden.

Fazit

Mit workbox-background-sync kannst du fehlgeschlagene Netzwerkanfragen wiederholen, um die Nutzerfreundlichkeit und Zuverlässigkeit deiner App zu verbessern. Beispielsweise können Nutzer fehlgeschlagene API-Anfragen noch einmal senden, damit sie nicht die Daten verlieren, die an deine API gesendet werden sollten. Es kann auch verwendet werden, um Lücken in Ihren eigenen Daten zu schließen, z. B. in Analysen. Das Modul workbox-google-analytics verwendet workbox-background-sync im Hintergrund, um fehlgeschlagene Anfragen zum Senden von Daten an Google Analytics zu wiederholen.

Unabhängig von Ihrem Anwendungsfall vereinfacht workbox-background-sync diese Art von Aufgaben, verbessert Ihre Entwicklererfahrung und bietet Ihnen mehr Möglichkeiten, die Nutzererfahrung und Funktionalität Ihrer Webanwendung zu verbessern.