Daten Ihrer Webanwendung im Hintergrund synchronisieren, um eine App-ähnliche Nutzung zu ermöglichen
Waren Sie schon einmal in einer der folgenden Situationen?
- Zug- oder U-Bahnfahrt mit unzuverlässiger oder fehlender Internetverbindung
- Die Internetverbindung wurde von deinem Mobilfunkanbieter gedrosselt, weil du dir zu viele Videos angesehen hast
- Sie leben in einem Land, in dem die Bandbreite nicht ausreicht, um die Nachfrage zu decken.
Wenn ja, haben Sie sicherlich schon einmal die Frustration erlebt, bestimmte Dinge im Web zu erledigen, und sich gefragt, warum sich Plattform-spezifische Apps in diesen Fällen so oft besser eignen. Plattformspezifische Apps können aktuelle Inhalte wie Nachrichtenartikel oder Wetterinformationen vorab abrufen. Auch wenn es in der U-Bahn kein Netzwerk gibt, können Sie sich die Nachrichten trotzdem ansehen.
Mit der regelmäßigen Hintergrundsynchronisierung können Webanwendungen Daten regelmäßig im Hintergrund synchronisieren, wodurch sie dem Verhalten einer plattformspezifischen App näher kommen.
Ausprobieren
Sie können die periodische Hintergrundsynchronisierung mit der Live-Demo-App ausprobieren. Beachten Sie dabei Folgendes:
- Sie verwenden Chrome 80 oder höher.
- Sie installieren die Webanwendung, bevor Sie die regelmäßige Hintergrundsynchronisierung aktivieren.
Konzepte und Verwendung
Mit der regelmäßigen Hintergrundsynchronisierung können Sie aktuelle Inhalte anzeigen, wenn eine progressive Webanwendung oder eine Seite mit Service Worker gestartet wird. Dazu werden Daten im Hintergrund heruntergeladen, wenn die App oder Seite nicht verwendet wird. Dadurch wird verhindert, dass die Inhalte der App nach dem Start aktualisiert werden, während sie angezeigt werden. Noch besser: Die App zeigt vor dem Aktualisieren keinen Ladebildschirm an.
Ohne regelmäßige Hintergrundsynchronisierung müssen Web-Apps alternative Methoden zum Herunterladen von Daten verwenden. Ein gängiges Beispiel ist die Verwendung einer Push-Benachrichtigung, um einen Dienstarbeiter zu aktivieren. Der Nutzer wird durch eine Meldung wie „Neue Daten verfügbar“ unterbrochen. Die Aktualisierung der Daten ist im Grunde ein Nebeneffekt. Sie können Push-Benachrichtigungen weiterhin für wirklich wichtige Neuigkeiten wie wichtige Nachrichten verwenden.
Die regelmäßige Hintergrundsynchronisierung wird leicht mit der Hintergrundsynchronisierung verwechselt. Obwohl sie ähnliche Namen haben, unterscheiden sich ihre Anwendungsfälle. Die Hintergrundsynchronisierung wird unter anderem am häufigsten verwendet, um Daten an einen Server zurückzusenden, wenn eine vorherige Anfrage fehlgeschlagen ist.
Nutzerinteraktion richtig gestalten
Eine fehlerhafte regelmäßige Hintergrundsynchronisierung kann die Ressourcen der Nutzer verschwenden. Vor der Veröffentlichung wurde die Funktion in Chrome in einer Testphase getestet, um sicherzustellen, dass sie richtig funktioniert. In diesem Abschnitt werden einige der Designentscheidungen erläutert, die wir bei Chrome getroffen haben, um diese Funktion so hilfreich wie möglich zu gestalten.
Die erste Designentscheidung, die wir bei Chrome getroffen haben, war, dass eine Webanwendung die periodische Hintergrundsynchronisierung erst dann verwenden kann, wenn ein Nutzer sie auf seinem Gerät installiert und als eigenständige Anwendung gestartet hat. Die regelmäßige Hintergrundsynchronisierung ist im Kontext eines regulären Tabs in Chrome nicht verfügbar.
Außerdem soll in Chrome verhindert werden, dass nicht verwendete oder selten verwendete Web-Apps unnötig Akku oder Daten verbrauchen. Deshalb ist die regelmäßige Hintergrundsynchronisierung so konzipiert, dass Entwickler sie sich verdienen müssen, indem sie einen Mehrwert für ihre Nutzer bieten. Chrome verwendet dazu einen Engagement-Wert für Websites (about://site-engagement/), um zu ermitteln, ob und wie oft regelmäßige Hintergrundsynchronisierungen für eine bestimmte Webanwendung erfolgen können. Mit anderen Worten: Ein periodicsync-Ereignis wird nur ausgelöst, wenn der Engagement-Wert größer als null ist. Der Wert wirkt sich auf die Häufigkeit aus, mit der das periodicsync-Ereignis ausgelöst wird. So wird sichergestellt, dass nur die Apps im Hintergrund synchronisiert werden, die Sie aktiv verwenden.
Die periodische Hintergrundsynchronisierung weist einige Ähnlichkeiten mit bestehenden APIs und Praktiken auf beliebten Plattformen auf. So können beispielsweise einmalige Hintergrundsynchronisierungen und Push-Benachrichtigungen die Logik einer Webanwendung (über ihren Service Worker) etwas länger aufrechterhalten, nachdem ein Nutzer die Seite geschlossen hat. Auf den meisten Plattformen ist es üblich, dass Nutzer Apps installiert haben, die regelmäßig im Hintergrund auf das Netzwerk zugreifen, um die Nutzerfreundlichkeit bei wichtigen Updates, beim Vorabladen von Inhalten, beim Synchronisieren von Daten usw. zu verbessern. Ähnlich verlängert die regelmäßige Hintergrundsynchronisierung die Lebensdauer der Logik einer Webanwendung, die in regelmäßigen Abständen für einige Minuten ausgeführt wird.
Wenn der Browser dies häufig und ohne Einschränkungen zulässt, kann dies zu Datenschutzproblemen führen. So wurde dieses Risiko für die regelmäßige Hintergrundsynchronisierung in Chrome behoben:
- Die Hintergrundsynchronisierung erfolgt nur in einem Netzwerk, mit dem das Gerät bereits verbunden war. Chrome empfiehlt, nur eine Verbindung zu Netzwerken herzustellen, die von vertrauenswürdigen Anbietern betrieben werden.
- Wie bei jeder Internetkommunikation werden bei der regelmäßigen Hintergrundsynchronisierung die IP-Adressen des Clients, des Servers, mit dem er kommuniziert, und der Name des Servers angezeigt. Um die Datenweitergabe auf ungefähr das Niveau zu senken, das erreicht würde, wenn die App nur synchronisiert würde, wenn sie im Vordergrund aktiv ist, begrenzt der Browser die Häufigkeit der Hintergrundsynchronisierung einer App anhand der Häufigkeit, mit der die Person die App verwendet. Wenn die Person nicht mehr häufig mit der App interagiert, wird die regelmäßige Hintergrundsynchronisierung nicht mehr ausgelöst. Das ist eine deutliche Verbesserung gegenüber dem Status quo bei plattformspezifischen Apps.
Wann kann sie verwendet werden?
Die Nutzungsregeln variieren je nach Browser. Zusammenfassend gilt für die regelmäßige Hintergrundsynchronisierung in Chrome Folgendes:
- Ein bestimmter Wert für das Nutzer-Engagement.
- Vorhandensein eines zuvor verwendeten Netzwerks
Der Zeitpunkt der Synchronisierungen wird nicht von den Entwicklern gesteuert. Die Synchronisierungshäufigkeit richtet sich nach der Häufigkeit der App-Nutzung. Plattformspezifische Apps tun dies derzeit nicht. Außerdem werden der Betriebs- und Verbindungsstatus des Geräts berücksichtigt.
Wann sollte es verwendet werden?
Wenn Ihr Service Worker zum Bearbeiten eines periodicsync-Ereignisses aktiviert wird, haben Sie die Möglichkeit, Daten anzufordern, aber keine Pflicht dazu. Berücksichtigen Sie bei der Verarbeitung des Ereignisses die Netzwerkbedingungen und den verfügbaren Speicherplatz und laden Sie als Reaktion unterschiedliche Datenmengen herunter. Die folgenden Ressourcen können Ihnen dabei helfen:
Berechtigungen
Nachdem der Service Worker installiert ist, können Sie mit der Permissions API nach periodic-background-sync fragen. Sie können dies entweder über einen Fenster- oder einen Service Worker-Kontext tun.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Regelmäßige Synchronisierung registrieren
Wie bereits erwähnt, ist für die regelmäßige Hintergrundsynchronisierung ein Service Worker erforderlich. Rufen Sie eine PeriodicSyncManager mit ServiceWorkerRegistration.periodicSync ab und rufen Sie register() darauf auf. Für die Registrierung sind sowohl ein Tag als auch ein Mindestsynchronisierungsintervall (minInterval) erforderlich. Das Tag identifiziert die registrierte Synchronisierung, sodass mehrere Synchronisierungen registriert werden können. Im folgenden Beispiel lautet der Tag-Name 'content-sync' und die minInterval ist ein Tag.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Registrierung bestätigen
Rufen Sie periodicSync.getTags() auf, um ein Array mit Registrierungs-Tags abzurufen. Im folgenden Beispiel wird anhand von Tag-Namen geprüft, ob die Cache-Aktualisierung aktiv ist, um ein erneutes Aktualisieren zu vermeiden.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Mit getTags() können Sie auch eine Liste der aktiven Registrierungen auf der Seite „Einstellungen“ Ihrer Webanwendung anzeigen lassen, damit Nutzer bestimmte Arten von Updates aktivieren oder deaktivieren können.
Auf ein Ereignis der regelmäßigen Hintergrundsynchronisierung reagieren
Wenn Sie auf ein regelmäßiges Ereignis der Hintergrundsynchronisierung reagieren möchten, fügen Sie Ihrem Service Worker einen periodicsync-Ereignishandler hinzu. Das übergebene event-Objekt enthält einen tag-Parameter, der dem bei der Registrierung verwendeten Wert entspricht. Wenn beispielsweise eine regelmäßige Hintergrundsynchronisierung mit dem Namen 'content-sync' registriert wurde, ist event.tag 'content-sync'.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
Registrierung einer Synchronisierung aufheben
Wenn Sie eine registrierte Synchronisierung beenden möchten, rufen Sie periodicSync.unregister() mit dem Namen der Synchronisierung auf, die Sie abmelden möchten.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Interfaces
Hier finden Sie eine kurze Übersicht über die von der Periodic Background Sync API bereitgestellten Schnittstellen.
PeriodicSyncEvent: Wird vom Browser zu einer beliebigen Zeit an denServiceWorkerGlobalScope.onperiodicsync-Ereignishandler übergeben.PeriodicSyncManager: Registriert und deregistriert regelmäßige Synchronisierungen und stellt Tags für registrierte Synchronisierungen bereit. Rufen Sie eine Instanz dieser Klasse aus der Property „ServiceWorkerRegistration.periodicSync“ ab.ServiceWorkerGlobalScope.onperiodicsync: Registriert einen Handler, um denPeriodicSyncEventzu empfangen.ServiceWorkerRegistration.periodicSync: Gibt einen Verweis auf diePeriodicSyncManagerzurück.
Beispiel
Inhalte aktualisieren
Im folgenden Beispiel werden aktuelle Artikel für eine Nachrichtenwebsite oder einen Blog mithilfe einer regelmäßigen Hintergrundsynchronisierung heruntergeladen und im Cache gespeichert. Beachten Sie den Tag-Namen, der die Art der Synchronisierung angibt ('update-articles'). Der Aufruf von updateArticles() ist in event.waitUntil() verpackt, damit der Dienst-Worker nicht beendet wird, bevor die Artikel heruntergeladen und gespeichert wurden.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Regelmäßige Hintergrundsynchronisierung zu einer vorhandenen Webanwendung hinzufügen
Diese Änderungen waren erforderlich, um einer vorhandenen PWA eine regelmäßige Hintergrundsynchronisierung hinzuzufügen. Dieses Beispiel enthält eine Reihe nützlicher Logging-Anweisungen, die den Status der periodischen Hintergrundsynchronisierung in der Webanwendung beschreiben.
Debugging
Es kann schwierig sein, bei lokalen Tests einen End-to-End-Überblick über die periodische Hintergrundsynchronisierung zu erhalten. Informationen zu aktiven Registrierungen, ungefähre Synchronisierungsintervalle und Protokolle früherer Synchronisierungsereignisse liefern wertvolle Informationen beim Debuggen des Verhaltens Ihrer Webanwendung. Glücklicherweise können Sie alle diese Informationen über eine experimentelle Funktion in den Chrome-Entwicklertools abrufen.
Lokale Aktivitäten aufzeichnen
Der Bereich Regelmäßige Hintergrundsynchronisierung in den DevTools ist nach den wichtigsten Ereignissen im Lebenszyklus der regelmäßigen Hintergrundsynchronisierung organisiert: Registrierung für die Synchronisierung, Durchführung einer Hintergrundsynchronisierung und Abmeldung. Wenn Sie Informationen zu diesen Ereignissen erhalten möchten, klicken Sie auf Aufzeichnung starten.
Während der Aufzeichnung werden in den DevTools Einträge für Ereignisse angezeigt, wobei für jedes Ereignis Kontext und Metadaten protokolliert werden.
Nachdem Sie die Aufzeichnung einmal aktiviert haben, bleibt sie bis zu drei Tage lang aktiviert. So können die DevTools lokale Informationen zur Fehlerbehebung zu Hintergrundsynchronisierungen erfassen, die möglicherweise noch Stunden später stattfinden.
Ereignisse simulieren
Das Aufzeichnen von Hintergrundaktivitäten kann hilfreich sein. Manchmal möchten Sie Ihren periodicsync-Handler jedoch sofort testen, ohne auf das Auslösen eines Ereignisses in der normalen Taktfrequenz zu warten.
Sie können dies im Chrome DevTools-Steuerfeld „Anwendung“ im Bereich Dienstworker tun. Im Feld Periodische Synchronisierung können Sie ein Tag für das Ereignis angeben und es beliebig oft auslösen.
DevTools-Oberfläche verwenden
Ab Chrome 81 wird im Bereich Application (Anwendung) der DevTools der Abschnitt Periodic Background Sync (Regelmäßige Hintergrundsynchronisierung) angezeigt.
