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:
- Laden Sie eine Seite, auf der Ihr Service Worker registriert ist.
- 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.
- 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 inChrome DevTools > Application > IndexedDB > workbox-background-sync > requests
nachsehen. - Stellen Sie nun entweder die Netzwerkverbindung wieder her oder aktivieren Sie Ihren Webserver wieder.
- Erzwingen Sie ein frühes
sync
-Ereignis, indem SieChrome DevTools > Application > Service Workers
aufrufen. Geben Sie den Tag-Namenworkbox-background-sync:<your queue name>
ein, wobei<your queue name>
der Name der festgelegten Warteschlange ist. - Klicken Sie auf die Schaltfläche „Synchronisieren“.
- 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.