Background Synchronization API

Die Background Synchronization API erlaubt es Webanwendungen, die Serversynchronisationsarbeit an ihren Service Worker zu übertragen, um sie zu einem späteren Zeitpunkt auszuführen, wenn das Gerät offline ist. Anwendungsfälle könnten das Versenden von Anfragen im Hintergrund umfassen, falls diese nicht gesendet werden konnten, während die Anwendung benutzt wurde.

Zum Beispiel könnte eine E-Mail-Client-Anwendung es ihren Benutzern ermöglichen, Nachrichten zu verfassen und zu senden, auch wenn das Gerät keine Netzwerkverbindung hat. Das Frontend der Anwendung registriert einfach eine Synchronisierungsanfrage, und der Service Worker wird benachrichtigt, wenn das Netzwerk wieder verfügbar ist und führt die Synchronisierung durch.

Das SyncManager-Interface ist über ServiceWorkerRegistration.sync verfügbar. Ein einzigartiger Tag-Bezeichner wird gesetzt, um das Synchronisierungsereignis zu "benennen", auf das dann im ServiceWorker-Skript gehört werden kann. Sobald das Ereignis empfangen wird, können Sie jede verfügbare Funktionalität ausführen, wie zum Beispiel das Senden von Anfragen an den Server.

Da diese API auf Service Worker angewiesen ist, ist die durch diese API bereitgestellte Funktionalität nur in einem sicheren Kontext verfügbar.

SyncManager Experimentell

Registriert Aufgaben, die zu einem späteren Zeitpunkt mit Netzwerkanbindung in einem Service Worker ausgeführt werden sollen. Diese Aufgaben werden als Hintergrundsynchronisierungsanfragen bezeichnet.

SyncEvent Experimentell

Stellt ein Synchronisierungsereignis dar, das an den globalen Bereich eines ServiceWorker gesendet wird. Es bietet eine Möglichkeit, Aufgaben im Service Worker auszuführen, sobald das Gerät eine Netzwerkverbindung hat.

Die folgenden Ergänzungen zur Service Worker API bieten einen Einstiegspunkt für das Einrichten von Hintergrundsynchronisierungen.

ServiceWorkerRegistration.sync Nur lesbar

Gibt eine Referenz auf die SyncManager-Schnittstelle zurück, um Aufgaben zu registrieren, die ausgeführt werden, sobald das Gerät eine Netzwerkverbindung hat.

sync Ereignis

Ein Ereignis-Handler, der immer dann ausgelöst wird, wenn ein sync-Ereignis auftritt. Dies geschieht, sobald das Netzwerk verfügbar wird.

Die folgenden Beispiele zeigen, wie die Schnittstelle verwendet wird.

Die folgende asynchrone Funktion registriert eine Hintergrundsynchronisierung aus einem Browsing-Kontext:

async function syncMessagesLater() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.sync.register("sync-messages");
  } catch {
    console.log("Background Sync could not be registered!");
  }
}

Dieser Code überprüft, ob eine Hintergrundsynchronisierungsaufgabe mit einem bestimmten Tag registriert ist.

navigator.serviceWorker.ready.then((registration) => {
  registration.sync.getTags().then((tags) => {
    if (tags.includes("sync-messages")) {
      console.log("Messages sync already requested");
    }
  });
});

Das folgende Beispiel zeigt, wie auf ein Hintergrundsynchronisierungsereignis im Service Worker reagiert werden kann.

self.addEventListener("sync", (event) => {
  if (event.tag === "sync-messages") {
    event.waitUntil(sendOutboxMessages());
  }
});

• Einführung in die Hintergrundsynchronisierung