Anfragen wiederholen, wenn wieder online

Wenn Sie Anfragen an einen Webserver senden, können Fehler auftreten. Das kann daran liegen, dass die Verbindung des Nutzers unterbrochen wurde oder der Remoteserver ausgefallen ist.

Der Schwerpunkt dieser Dokumentation liegt zwar hauptsächlich auf der Verarbeitung von GET-Anfragen in einem Service Worker, es können aber auch andere Methoden wie POST, PUT oder DELETE ins Spiel kommen. Diese Methoden werden häufig für die Kommunikation mit Back-End-APIs verwendet, um Daten für eine Webanwendung bereitzustellen. Wenn diese Anfragen ohne einen Service Worker fehlschlagen, müssen sie vom Nutzer manuell noch einmal ausgeführt werden, wenn er wieder online ist – und Nutzer denken nicht immer daran.

Wenn dies auf Ihre Anwendung zutrifft – und wenn ein Service Worker vorhanden ist – sollten Sie idealerweise noch einmal fehlgeschlagene Anfragen senden, wenn 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 eine 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 noch einmal 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 mit POST-Anfragen an eine API-Route übereinstimmt, die JSON-Daten abruft. Wenn der Nutzer offline ist, versucht BackgroundSyncPlugin die Anfrage noch einmal, sobald der Nutzer wieder online ist. Das ist maximal einen Tag lang möglich.

Fortgeschrittene Nutzung

workbox-background-sync stellt auch eine Queue-Klasse bereit, der Sie instanziieren und fehlgeschlagene Anfragen hinzufügen können. Wie bei BackgroundSyncPlugin werden die fehlgeschlagenen Anfragen in IndexedDB gespeichert und versucht, wenn der Browser denkt, 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() des globalen SyncManager erstellt wird. Es ist auch der Name, der für den Objektspeicher der IndexedDB-Datenbank 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());
});

Nachdem sie der Warteschlange hinzugefügt wurden, werden die Anfragen automatisch wiederholt, wenn der Service Worker das Ereignis sync empfängt, da der Browser davon ausgeht, 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 ist weniger effektiv, um eine fehlgeschlagene Anfrage noch einmal zu senden, aber eine Art Fallback.

workbox-background-sync wird getestet

Das Testen der Hintergrundsynchronisierung kann schwierig sein, kann aber in den Chrome-Entwicklertools durchgeführt werden. Der aktuell beste Ansatz sieht in etwa so aus:

  1. Laden Sie eine Seite, die Ihren Service Worker registriert.
  2. Trennen Sie die Netzwerkverbindung Ihres Computers oder Ihren Webserver. Verwenden Sie die Offline-Ein/Aus-Schaltfläche in den Chrome-Entwicklertools nicht. Das Kästchen „Offline“ wirkt sich nur auf Anfragen von der Seite aus, aber Service Worker-Anfragen werden weiterhin weitergeleitet.
  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 Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests aufrufen.
  4. Stellen Sie nun entweder die Netzwerkverbindung wieder her oder schalten Sie Ihren Webserver wieder ein.
  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 von Ihnen festgelegten Warteschlange ist.
  6. Klicken Sie auf „Synchronisieren“
    . Screenshot des Dienstprogramms für die Hintergrundsynchronisierung im Anwendungsbereich der Chrome-Entwicklertools Das Synchronisierungsereignis wurde für eine Warteschlange von &quot;myQueueName&quot; angegeben für &quot;workbox-background-sync&quot; -Modul.
  7. Sie sollten jetzt sehen, dass zuvor fehlgeschlagene Netzwerkanfragen wiederholt und verarbeitet wurden. Der IndexedDB-Speicher sollte daher leer sein, da die Anfragen erfolgreich wiederholt wurden.

Fazit

Die Verwendung von workbox-background-sync zum Wiederholen fehlgeschlagener Netzwerkanfragen kann eine gute Möglichkeit sein, die Nutzerfreundlichkeit und Zuverlässigkeit deiner App zu verbessern. So kannst du Nutzern beispielsweise ermöglichen, fehlgeschlagene API-Anfragen noch einmal zu senden, damit die Daten, die an deine API gesendet werden sollen, nicht verloren gehen. Er kann auch verwendet werden, um Lücken in Ihren eigenen Daten zu schließen, z. B. in Analysen. Das workbox-google-analytics-Modul verwendet workbox-background-sync im Hintergrund, um fehlgeschlagene Anfragen zum Senden von Daten an Google Analytics zu wiederholen.

Egal, für welchen Anwendungsfall Sie sich entscheiden, workbox-background-sync vereinfacht diese Art von Aufgaben, Sie verbessert die Entwicklererfahrung und bietet Ihnen mehr Möglichkeiten, die Nutzererfahrung und Funktionalität Ihrer Webanwendung zu verbessern.