Daten Ihrer Web-App im Hintergrund synchronisieren, um sie App-ähnlicher zu machen
Warst du schon einmal in einer der folgenden Situationen?
- Fahrt in einem Zug oder einer U-Bahn mit unzuverlässigen oder fehlenden Verbindungen
- Vom Mobilfunkanbieter gedrosselt, weil zu viele Videos angesehen wurden
- Leben in einem Land, in dem die Bandbreite zu groß ist, um der Nachfrage gerecht zu werden
Falls ja, dann hattest du bestimmt schon die Frustration über bestimmte Dinge im Web gespürt und dich gefragt, warum plattformspezifische Apps in diesen Szenarien so oft besser funktionieren. Plattformspezifische Apps können aktuelle Inhalte wie Nachrichtenartikel oder Wetterinformationen im Voraus abrufen. Auch wenn es in der U-Bahn kein Netz gibt, können Sie die Nachrichten lesen.
Mit der regelmäßigen Hintergrundsynchronisierung können Webanwendungen regelmäßig Daten im Hintergrund synchronisieren, um Web-Apps dem Verhalten einer plattformspezifischen Anwendung näher zu bringen.
Jetzt testen
Du kannst die regelmäßige Hintergrundsynchronisierung mit der Live-Demo-App ausprobieren. Achte vor der Verwendung auf Folgendes:
- Sie verwenden Chrome 80 oder höher.
- Sie installieren die Web-App, bevor Sie die regelmäßige Hintergrundsynchronisierung aktivieren.
Konzepte und Nutzung
Durch die regelmäßige Hintergrundsynchronisierung können Sie neue Inhalte anzeigen, wenn eine progressive Web-App oder eine von einem Service Worker unterstützte Seite gestartet wird. Dabei werden Daten im Hintergrund heruntergeladen, wenn die App oder Seite nicht verwendet wird. Dadurch wird verhindert, dass der Inhalt der App nach dem Start aktualisiert wird, während sie angesehen wird. Außerdem wird verhindert, dass in der App vor der Aktualisierung ein rotierendes Ladesymbol angezeigt wird.
Ohne regelmäßige Hintergrundsynchronisierung müssen Webanwendungen alternative Methoden zum Herunterladen von Daten verwenden. Ein gängiges Beispiel ist die Verwendung einer Push-Benachrichtigung, um einen Service-Worker zu wecken. Der Nutzer wird durch eine Meldung wie „Neue Daten verfügbar“ unterbrochen. Das Aktualisieren der Daten ist im Wesentlichen ein Nebeneffekt. Sie haben weiterhin die Möglichkeit, Push-Benachrichtigungen für wirklich wichtige Updates zu verwenden, wie z. B. wichtige Eilmeldungen.
Die regelmäßige Hintergrundsynchronisierung kann leicht mit der Hintergrundsynchronisierung verwechselt werden. Obwohl sie ähnliche Namen haben, unterscheiden sich ihre Anwendungsfälle. Die Hintergrundsynchronisierung wird unter anderem am häufigsten verwendet, um Daten an einen Server erneut zu senden, wenn eine vorherige Anfrage fehlgeschlagen ist.
Das richtige Nutzer-Engagement
Eine regelmäßige Hintergrundsynchronisierung könnte die Ressourcen der Nutzer verschwenden. Vor der Veröffentlichung hat Chrome einen Testzeitraum durchgeführt, um sicherzugehen, dass alles korrekt war. In diesem Abschnitt werden einige Designentscheidungen erläutert, die Chrome getroffen hat, um diese Funktion so hilfreich wie möglich zu machen.
Die erste Designentscheidung von Chrome besagt, dass eine Web-App die regelmäßige Hintergrundsynchronisierung erst verwenden kann, nachdem sie von einem Nutzer auf ihrem Gerät installiert und als eigene Anwendung gestartet wurde. Die regelmäßige Hintergrundsynchronisierung ist auf normalen Tabs in Chrome nicht verfügbar.
Da Chrome nicht möchte, dass ungenutzte oder selten genutzte Web-Apps den Akku oder die Daten unnötig belasten, hat Chrome außerdem eine regelmäßige Hintergrundsynchronisierung entwickelt, bei der Entwickler Geld verdienen müssen, indem sie ihren Nutzern einen Mehrwert bieten. Konkret verwendet Chrome einen Website-Interaktionswert (about://site-engagement/), um zu bestimmen, ob und wie oft regelmäßige Hintergrundsynchronisierungen für eine bestimmte Web-App möglich sind. Mit anderen Worten: Ein periodicsync-Ereignis wird nur dann ausgelöst, wenn der Interaktionsfaktor größer als null ist und sein Wert die Häufigkeit beeinflusst, mit der das periodicsync-Ereignis ausgelöst wird. Dadurch wird sichergestellt, dass im Hintergrund nur die Apps aktiv sind, die Sie aktiv verwenden.
Bei der regelmäßigen Hintergrundsynchronisierung sind einige Ähnlichkeiten mit vorhandenen APIs und Praktiken auf beliebten Plattformen erkennbar. Beispielsweise ermöglichen eine einmalige Hintergrundsynchronisierung und Push-Benachrichtigungen, dass die Logik einer Web-App (über den Service Worker) etwas länger hält, nachdem eine Person 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. Dies verbessert die Nutzererfahrung für wichtige Updates, das Vorabrufen von Inhalten, das Synchronisieren von Daten usw. In ähnlicher Weise verlängert die regelmäßige Hintergrundsynchronisierung auch die Lebensdauer der Logik einer Webanwendung, damit sie regelmäßig für einige Minuten ausgeführt wird.
Wenn der Browser dies häufig und ohne Einschränkungen zulässt, könnte dies Bedenken bezüglich des Datenschutzes nach sich ziehen. So ist Chrome dem Risiko einer regelmäßigen Hintergrundsynchronisierung begegnet:
- Die Hintergrundsynchronisierungsaktivität findet nur in einem Netzwerk statt, mit dem das Gerät zuvor verbunden war. Chrome empfiehlt, nur eine Verbindung zu Netzwerken herzustellen, die von vertrauenswürdigen Parteien betrieben werden.
- Wie bei jeder Internetkommunikation offengelegt die regelmäßige Hintergrundsynchronisierung die IP-Adressen des Clients, des Servers, mit dem er kommuniziert, und dem Namen des Servers. Der Browser schränkt die Häufigkeit der Hintergrundsynchronisierungen einer App ein und passt die Häufigkeit der App-Nutzung an die Häufigkeit an, mit der die App nicht mehr häufig verwendet wird. Daher wird die regelmäßige Synchronisierung im Hintergrund nicht mehr ausgelöst. Dies ist eine Verbesserung gegenüber dem Status quo bei plattformspezifischen Apps.
Wann kann sie verwendet werden?
Die Regeln für die Verwendung variieren je nach Browser. Zusammenfassend lässt sich sagen, dass Chrome die folgenden Anforderungen für die regelmäßige Hintergrundsynchronisierung stellt:
- 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 entspricht der Häufigkeit, mit der die Anwendung verwendet wird. Dies ist bei plattformspezifischen Apps derzeit nicht möglich. Er berücksichtigt auch den Strom- und Verbindungsstatus des Geräts.
Wann sollte es verwendet werden?
Wenn der Service Worker für die Verarbeitung eines periodicsync-Ereignisses aktiviert ist, können Sie Daten anfordern, sind aber nicht dazu verpflichtet. Bei der Verarbeitung des Ereignisses sollten Sie die Netzwerkbedingungen und den verfügbaren Speicherplatz berücksichtigen und darauf reagieren. Die folgenden Ressourcen können Ihnen dabei helfen:
Berechtigungen
Verwenden Sie nach der Installation des Service Workers die Permissions API, um periodic-background-sync abzufragen. Dies ist entweder in einem Fenster- oder in einem Service Worker-Kontext möglich.
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.
}
Registrieren einer regelmäßigen Synchronisierung
Wie bereits erwähnt, ist für eine regelmäßige Hintergrundsynchronisierung ein Service Worker erforderlich. Rufen Sie ein PeriodicSyncManager mit ServiceWorkerRegistration.periodicSync ab und rufen Sie register() dafür 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 der minInterval-Wert 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 überprüfen
Rufe periodicSync.getTags() auf, um ein Array von Registrierungs-Tags abzurufen. Im folgenden Beispiel werden Tag-Namen verwendet, um zu bestätigen, dass die Cache-Aktualisierung aktiv ist, damit keine weiteren Aktualisierungen vorgenommen werden.
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();
}
Sie können getTags() auch verwenden, um auf der Einstellungsseite Ihrer Webanwendung eine Liste der aktiven Registrierungen anzuzeigen. Nutzer können dann bestimmte Updatetypen aktivieren oder deaktivieren.
Auf eine regelmäßige Synchronisierung im Hintergrund reagieren
Wenn Sie auf eine regelmäßige Hintergrundsynchronisierung reagieren möchten, fügen Sie Ihrem Service Worker einen periodicsync-Event-Handler hinzu. Das an dieses Objekt übergebene event-Objekt enthält einen tag-Parameter, der mit dem bei der Registrierung verwendeten Wert übereinstimmt. 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
Um eine registrierte Synchronisierung zu beenden, rufen Sie periodicSync.unregister() mit dem Namen der Synchronisierung auf, deren Registrierung Sie aufheben möchten.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Interfaces
Hier finden Sie einen kurzen Überblick über die Schnittstellen, die von der Periodic Background Sync API bereitgestellt werden.
PeriodicSyncEvent: Wird zu einem vom Browser gewählten Zeitpunkt an den Event-HandlerServiceWorkerGlobalScope.onperiodicsyncübergeben.PeriodicSyncManager: Registriert und hebt regelmäßige Synchronisierungen auf und stellt Tags für registrierte Synchronisierungen bereit. Rufen Sie eine Instanz dieser Klasse aus dem Attribut ServiceWorkerRegistration.periodicSync ab.ServiceWorkerGlobalScope.onperiodicsync. Registriert einen Handler für den Empfang vonPeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Gibt einen Verweis aufPeriodicSyncManagerzurück.
Beispiel
Inhalte aktualisieren
Im folgenden Beispiel wird eine regelmäßige Hintergrundsynchronisierung verwendet, um aktuelle Artikel einer Nachrichtenwebsite oder eines Blogs herunterzuladen und im Cache zu speichern. Beachten Sie den Tag-Namen, der die Art der Synchronisierung angibt ('update-articles'). Der Aufruf von updateArticles() ist in event.waitUntil() eingeschlossen, sodass der Service 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 regelmäßig eine Hintergrundsynchronisierung hinzuzufügen. Dieses Beispiel enthält eine Reihe hilfreicher Logging-Anweisungen, die den Status der regelmäßigen Hintergrundsynchronisierung in der Webanwendung beschreiben.
Debugging
Es kann eine Herausforderung sein, bei lokalen Tests eine End-to-End-Ansicht der regelmäßigen Hintergrundsynchronisierung zu erhalten. Informationen zu aktiven Registrierungen, ungefähren Synchronisierungsintervallen und Logs früherer Synchronisierungsereignisse bieten wertvollen Kontext beim Debugging des Verhaltens Ihrer Webanwendung. All diese Informationen finden Sie über eine experimentelle Funktion in den Chrome-Entwicklertools.
Lokale Aktivitäten werden aufgezeichnet
Der Abschnitt Periodische Hintergrundsynchronisierung der Entwicklertools umfasst wichtige Ereignisse im Lebenszyklus der regelmäßigen Hintergrundsynchronisierung: Registrierung für die Synchronisierung, Durchführung einer Hintergrundsynchronisierung und Aufheben der Registrierung. Klicken Sie auf Aufzeichnung starten, um Informationen zu diesen Ereignissen abzurufen.
Während der Aufzeichnung werden in den Entwicklertools Einträge mit entsprechendem Kontext und Metadaten für jedes Ereignis angezeigt.
Nachdem Sie die Aufzeichnung einmal aktiviert haben, bleibt sie bis zu drei Tage aktiviert. So können in den Entwicklertools lokale Debugging-Informationen zu möglichen Hintergrundsynchronisierungen erfasst werden – sogar Stunden in der Zukunft.
Ereignisse simulieren
Das Aufzeichnen von Hintergrundaktivitäten kann zwar hilfreich sein, es kann aber Situationen geben, in denen Sie den periodicsync-Handler sofort testen möchten, ohne darauf warten zu müssen, dass ein Ereignis beim normalen Rhythmus ausgelöst wird.
Dies ist über den Abschnitt Service Workers im Anwendungsbereich der Chrome-Entwicklertools möglich. Im Feld Regelmäßige Synchronisierung können Sie ein Tag für das Ereignis angeben und es so oft auslösen, wie Sie möchten.
Benutzeroberfläche der Entwicklertools verwenden
Ab Chrome 81 wird im Bereich Anwendung der Entwicklertools der Abschnitt Periodic Background Sync (Periodische Hintergrundsynchronisierung) angezeigt.
