Mehr Offlinefunktionen mit der Periodic Background Sync API

Daten Ihrer Webanwendung im Hintergrund synchronisieren, um eine App-ähnliche Nutzung zu ermöglichen

Joe Medley
Joe Medley

Haben Sie schon einmal eine der folgenden Situationen erlebt?

  • Zug- oder U-Bahnfahrt mit unzuverlässiger oder fehlender Internetverbindung
  • Deine 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 befriedigen.

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 Netz gibt, können Sie die Nachrichten lesen.

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 eine regelmäßige Hintergrundsynchronisierung mit der Live-Demo-App ausprobieren. Prüfen Sie vor der Verwendung Folgendes:

  • Sie verwenden Chrome 80 oder höher.
  • Sie installieren die Webanwendung, bevor Sie die regelmäßige Hintergrundsynchronisierung aktivieren.

Konzepte und Verwendung

Mit einer regelmäßigen Hintergrundsynchronisierung können Sie neue Inhalte anzeigen, wenn eine progressive Web-App oder eine von Service Workern unterstützte Seite aufgerufen wird. Die Daten werden 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: Dadurch 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 Dienst-Worker zu wecken. 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, sind ihre Anwendungsfälle unterschiedlich. Die Hintergrundsynchronisierung wird unter anderem am häufigsten verwendet, um Daten an einen Server zurückzusenden, wenn eine vorherige Anfrage fehlgeschlagen ist.

Nutzerinteraktionen richtig fördern

Wird sie nicht richtig durchgeführt, kann eine regelmäßige Hintergrundsynchronisierung die Ressourcen der Nutzer verschwenden. Vor der Veröffentlichung führte Chrome einen Testzeitraum durch, um sicherzustellen, dass es 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 bei einem normalen Tab in Chrome nicht verfügbar.

Da Chrome nicht möchte, dass ungenutzte oder selten genutzte Webanwendungen einen unnötigen Akku- oder Datenverbrauch verursachen, hat Chrome eine regelmäßige Hintergrundsynchronisierung so konzipiert, dass Entwickler diese verdienen müssen, indem sie ihren Nutzern einen Mehrwert 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 stattfinden 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 werden nur die Apps synchronisiert, die Sie aktiv verwenden.

Die regelmäßige Hintergrundsynchronisierung weist einige Ähnlichkeiten mit vorhandenen APIs und Praktiken auf gängigen 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 der gesamten Internetkommunikation gibt eine regelmäßige Hintergrundsynchronisierung die IP-Adressen des Clients, des Servers, mit dem es kommuniziert, und den Namen des Servers an. Um die Konzentration auf ungefähr das zu reduzieren, was es wäre, wenn die App nur während der Synchronisierung im Vordergrund synchronisiert würde, begrenzt der Browser die Häufigkeit der Hintergrundsynchronisierungen, um die Häufigkeit der App-Nutzung abzugleichen. Wenn die Person häufig nicht mehr mit der App interagiert, wird auch keine regelmäßige Hintergrundsynchronisierung ausgelöst. Das ist eine deutliche Verbesserung gegenüber dem Status quo bei plattformspezifischen Apps.

Wann kann es 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 sie verwendet werden?

Wenn Ihr Service Worker zum Bearbeiten eines periodicsync-Ereignisses aktiviert wird, haben Sie die Möglichkeit, Daten anzufordern, aber nicht die 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. Dies ist entweder in einem Fenster- oder 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.
}

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 regelmäßige Hintergrundsynchronisierungsereignisse reagieren

Wenn Sie auf ein Ereignis der regelmäßigen 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

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 eine kurze Übersicht über die Schnittstellen, die von der Periodic Background Sync API bereitgestellt werden.

  • PeriodicSyncEvent: Wird vom Browser zu einer beliebigen Zeit an den ServiceWorkerGlobalScope.onperiodicsync-Ereignishandler übergeben.
  • PeriodicSyncManager: Registriert regelmäßige Synchronisierungen und hebt ihre Registrierung auf 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 den PeriodicSyncEvent zu empfangen.
  • ServiceWorkerRegistration.periodicSync: Gibt einen Verweis auf die PeriodicSyncManager zurück.

Beispiel

Inhalte aktualisieren

Im folgenden Beispiel wird eine regelmäßige Hintergrundsynchronisierung verwendet, um aktuelle Artikel für eine Nachrichtenwebsite oder einen Blog 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() 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 Protokollierungsanweisungen, 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.

Die Schaltfläche „Aufzeichnen“ in den DevTools
Die Schaltfläche „Aufzeichnen“ in den Entwicklertools

Während der Aufzeichnung werden in den Entwicklertools entsprechende Einträge angezeigt, die den Ereignissen entsprechen, wobei jeweils der Kontext und die Metadaten protokolliert werden.

Beispiel für aufgezeichnete Daten der regelmäßigen Hintergrundsynchronisierung
Beispiel für aufgezeichnete Daten zur regelmäßigen Hintergrundsynchronisierung

Nachdem Sie die Aufzeichnung einmal aktiviert haben, bleibt sie bis zu drei Tage lang aktiviert. So können in den DevTools lokale Informationen zur Fehlerbehebung zu Hintergrundsynchronisierungen erfasst werden, 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.

Im Bereich „Dienstworker“ des Bereichs „Anwendung“ sind ein Textfeld und eine Schaltfläche für die „Periodische Synchronisierung“ zu sehen.

Entwicklertools-Oberfläche verwenden

Ab Chrome 81 wird im Bereich Anwendung der Entwicklertools der Bereich Regelmäßige Hintergrundsynchronisierung angezeigt.

Der Bereich „Anwendung“ mit dem Abschnitt „Regelmäßige Hintergrundsynchronisierung“