Hintergrund-Synchronisation für PWAs, Teil 3: Periodic Sync API
Mithilfe der Periodic Sync API können Entwickler Synchronisierungsereignisse regelmäßig mehr als einmal auslösen. Dieses Vorgehen eignet sich etwa für Nachrichtenanwendungen, die regelmäßig im Hintergrund die offline vorgehaltenen Artikel aktualisieren wollen.
- Christian Liebel
Im dritten Teil dieser Serie widmen wir uns der Periodic Sync API, der neuesten Schnittstelle zur Umsetzung von Hintergrundsynchronisation für Progressive Web Apps und andere Anwendungen. Diese soll einen wiederkehrenden Datenaustausch ermöglichen.
Mit der Schnittstelle soll im Gegensatz zur Background Sync API und Background Fetch API eine Möglichkeit geschaffen werden, Synchronisierungsereignisse regelmäßig mehr als einmal auslösen zu können. Das Vorgehen eignet sich etwa für Nachrichtenanwendungen, die regelmäßig im Hintergrund die offline vorgehaltenen Artikel aktualisieren wollen. Die Web Periodic Background Sync API setzt auf der Background Sync API aus dem ersten Teil auf. Sie möchte die originale Schnittstelle erweitern und die dort angesprochenen Schwachpunkte adressieren. So ist zur Verwendung der Schnittstelle diesmal zuerst eine Berechtigungsabfrage erforderlich:
const permission = await navigator.permissions.query({
name: 'periodic-background-sync'
});
if (permission.state === 'granted') {
// Periodic Sync API available
} else {
// Periodic Sync API not available
}
Wie die Background Sync API zeigt auch die Periodic Background Sync API keine Information auf der Benutzeroberfläche an, wenn ein Hintergrundvorgang im Gange ist (vergleichbar zu nativen Apps). Wie alle zuvor genannten Ansätze ist auch für diese Schnittstelle zunächst eine Service-Worker-Registrierung erforderlich und Entwickler müssen separat auf das Vorhandensein der Webschnittstelle prüfen. Ist das PeriodicSyncManager-Interface im globalen Window-Objekt vorhanden, steht die API auf dem Zielsystem zur Verfügung. Auf der Service-Worker-Registrierung steht die Instanz des PeriodicSyncManager zur Verfügung. Wenn der Anwender zuvor zugestimmt hat, können sich Entwickler über die Methode register() für ein periodisches Synchronisierungsereignis registrieren:
navigator.serviceWorker.ready.then(async registration => {
if ('PeriodicSyncManager' in window) {
try {
await registration.periodicSync.register('articles', {
minInterval: 24 * 60 * 60 * 1000
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
});
Neben dem verpflichtenden, aus Teil 1 bekannten Bezeichner (im Beispiel articles) lässt sich in einem Konfigurationsobjekt das gewünschte Mindestintervall angeben (im Beispiel ein Ereignis pro Tag). Über das tatsächliche Aufrufintervall entscheidet jedoch der Webbrowser.
In Chromium-basierten Browsern ist die Anwendung zunächst auf dem Gerät zu installieren. Nur in diesem Fall gibt die oben gezeigte Berechtigungsabfrage granted zurück. Ein Abfragefenster erscheint übrigens nicht, da Chrome die Installation der Anwendung als implizite Einwilligung ansieht. Dann hängt die Entscheidung, ob und wie oft eine Website die Schnittstelle nutzen darf, von ihrem Site-Engagement-Score ab. Dieser beträgt zwischen 0 und 100 Punkten, wird durch die Verwendung der Website beeinflusst und lässt sich unter chrome://site-engagement einsehen.
Da Websites im Hintergrund Rechenzeit nutzen können und damit den Akku belasten, ist die Nutzung überhaupt nur Websites gestattet, die regelmäßig genutzt werden, die also einen Site-Engagement-Score größer 0 haben. Je höher er ist, desto öfter dürfen die Ereignisse ausgelöst werden, im Bestfall einmal pro Tag. Wird eine Website irgendwann nicht mehr so oft genutzt, wird auch die Synchronisierung weniger häufig ausgelöst. Ist der Browser schließlich noch der Ansicht, dass Anwender gerade online sind (mit den im ersten Teil beschriebenen Einschränkungen), wird im Service Worker das Ereignis periodicsync ausgelöst. Wie zuvor ist auch hier keine erneute Prüfung der Existenz der Schnittstelle erforderlich, da das Ereignis auf Browsern ohne Unterstützung für die API einfach nicht aufgerufen wird:
self.addEventListener('periodicsync', event => {
if (event.tag === 'articles') {
event.waitUntil(syncArticles());
}
});
Der Service Worker kann dann wieder eine beliebige Synchronisierungslogik durchführen, etwa einen HTTPS-Request auslösen und die empfangenen Daten in den Cache legen oder den erhaltenen Datenstand mit der lokalen IndexedDB-Instanz zusammenführen.
Die Web Periodic Background Synchronization API ist seit Google Chrome 80 verfügbar – auch auf anderen Browsern, die auf die Chromium-Engine aufsetzen, wie Microsoft Edge. Eine Demoanwendung zum Testen der Schnittstelle steht hier zur Verfügung. Dieser Patch zeigt, was zu tun ist, um eine bestehende PWA mit Periodic-Sync-Funktionalität auszustatten. Die Periodic Sync API bietet sich für alle Anwendungen an, deren Zustand sich im Hintergrund regelmäßig ändert: Nachrichten-, ERP- oder Social-Media-Anwendungen. Dank dieser Schnittstellen erhalten Nutzer beim Öffnen der Anwendung immer einen relativ frischen Datenstand. Im nächsten und letzten Teil dieser Serie werden die drei vorgestellten Synchronisationsmechanismen noch einmal kurz zusammengefasst und gezeigt, wie man diese debuggen kann. ()
