Web Periodic Background Synchronization API

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die Web Periodic Background Synchronization API bietet eine Möglichkeit, Aufgaben zu registrieren, die in einem Service Worker in regelmäßigen Abständen bei vorhandener Netzwerkverbindung ausgeführt werden. Diese Aufgaben werden als periodische Hintergrundsynchronisierungsanfragen bezeichnet.

Konzepte und Verwendung

Die Periodic Background Sync API ermöglicht es Webanwendungen, ihren Service Worker darauf hinzuweisen, in regelmäßigen Abständen Aktualisierungen vorzunehmen. Mögliche Verwendungen umfassen das Abrufen der neuesten Inhalte, während ein Gerät mit Wi-Fi verbunden ist, oder Hintergrundaktualisierungen einer Anwendung zu ermöglichen.

Das Mindestzeitintervall wird festgelegt, wenn die API aufgerufen wird; der Benutzeragent kann jedoch auch andere Faktoren berücksichtigen, die beeinflussen, wann der Service Worker das Ereignis erhält. Beispielsweise kann vorheriges Engagement der Website oder eine Verbindung zu einem bekannten Netzwerk einen Einfluss haben.

Die PeriodicSyncManager-Schnittstelle ist über ServiceWorkerRegistration.periodicSync verfügbar. Ein eindeutiger Tag-Identifikator wird festgelegt, um das Synchronisierungsereignis zu "benennen", das dann im Skript des ServiceWorker abgehört werden kann. Sobald das Ereignis empfangen wird, können Sie jede verfügbare Funktionalität ausführen, wie zum Beispiel das Aktualisieren von Caches oder das Abrufen neuer Ressourcen.

Da diese API auf Service Workern basiert, ist die von dieser API bereitgestellte Funktionalität nur in einem sicheren Kontext verfügbar.

Schnittstellen

PeriodicSyncManager Experimentell: Registriert Aufgaben, die in einem Service Worker in regelmäßigen Abständen bei vorhandener Netzwerkverbindung ausgeführt werden. Diese Aufgaben werden als periodische Hintergrundsynchronisierungsanfragen bezeichnet.
PeriodicSyncEvent Experimentell: Stellt ein Synchronisationsereignis dar, das an den globalen Geltungsbereich eines ServiceWorker gesendet wird. Es bietet eine Möglichkeit, Aufgaben im Service Worker mit Netzwerkverbindung auszuführen.

Erweiterungen zu anderen Schnittstellen

Die folgenden Ergänzungen zur Service Worker API sind in der Periodic Background Sync-Spezifikation angegeben, um einen Einstiegspunkt für die Nutzung der periodischen Hintergrundsynchronisierung bereitzustellen.

ServiceWorkerRegistration.periodicSync Nur lesbar Experimentell: Gibt eine Referenz auf die PeriodicSyncManager-Schnittstelle zurück, um Aufgaben zu registrieren, die in bestimmten Intervallen ausgeführt werden sollen.
periodicsync Ereignis Experimentell: Tritt in regelmäßigen Abständen auf, die bei der Registrierung eines PeriodicSyncManager festgelegt wurden.

Beispiele

Die folgenden Beispiele zeigen, wie die Schnittstelle verwendet wird.

Anfordern einer periodischen Hintergrundsynchronisierung

Die folgende asynchrone Funktion registriert eine periodische Hintergrundsynchronisierung in einem Mindestintervall von einem Tag aus einem Browsing-Kontext:

async function registerPeriodicNewsCheck() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.periodicSync.register("get-latest-news", {
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch {
    console.log("Periodic Sync could not be registered!");
  }
}

Überprüfen einer periodischen Hintergrundsynchronisierung nach Tag

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

navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.getTags().then((tags) => {
    if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
  });
});

Entfernen einer periodischen Hintergrundsynchronisierungsaufgabe

Der folgende Code entfernt eine periodische Hintergrundsynchronisierungsaufgabe, um den Sync von Artikeln im Hintergrund zu stoppen.

navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.unregister("get-latest-news");
});

Abhören eines periodischen Hintergrundsynchronisierungsereignisses innerhalb eines Service Workers

Das folgende Beispiel zeigt, wie auf ein periodisches Synchronisierungsereignis im Service Worker reagiert wird.

self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});

Spezifikationen

Specification
Web Periodic Background Synchronization