Mehr Offlinefunktionen mit der Periodic Background Sync API

Synchronisieren Sie die Daten Ihrer Webanwendung im Hintergrund, um eine App-ähnliche Nutzererfahrung zu ermöglichen

Jeff Posnick

Joe Medley

Waren Sie schon einmal in einer der folgenden Situationen?

• Fahren eines Zugs oder einer U-Bahn mit unzuverlässiger oder gar keiner Anbindung
• Wurde vom Mobilfunkanbieter gedrosselt, nachdem sie sich zu viele Videos angesehen haben
• Du lebst in einem Land, in dem es kaum die Bandbreite gibt, um mit der Nachfrage Schritt zu halten.

Wenn ja, war es für Sie sicher frustrierend, im Web zu erledigen, und fragten sich, warum plattformspezifische Apps so oft besser funktionieren. in diesen Szenarien. Plattformspezifische Apps können aktuelle Inhalte wie Nachrichtenartikel oder das Wetter abrufen im Voraus zu informieren. Auch wenn es in der U-Bahn kein Netz gibt, können Sie die Nachrichten.

Mit der regelmäßigen Hintergrundsynchronisierung können Webanwendungen regelmäßig synchronisiert werden. im Hintergrund ausgeführt, wodurch sich Web-Apps dem Verhalten einer plattformspezifischen

Ausprobieren

Probieren Sie die regelmäßige Hintergrundsynchronisierung mit der Live-Demo aus. App. Stellen Sie vor der Verwendung Folgendes sicher:

• Sie verwenden Chrome 80 oder höher.
• Ich Installieren bevor Sie die regelmäßige Hintergrundsynchronisierung aktivieren.

Konzepte und Verwendung

Durch eine regelmäßige Hintergrundsynchronisierung können neue Inhalte angezeigt werden, wenn eine progressive Web-App oder eine von einem Service Worker unterstützte Seite geöffnet wird. Dazu werden Daten in im Hintergrund, wenn die App oder Seite nicht verwendet wird. Dadurch wird verhindert, dass die App wird der Content nach dem Start nicht aktualisiert, während er angesehen wird. Noch besser: Es verhindert, dass in der App vor der Aktualisierung ein rotierendes Ladesymbol angezeigt wird.

Ohne regelmäßige Hintergrundsynchronisierung müssen Web-Apps alternative Methoden verwenden, um Daten herunterladen. Ein gängiges Beispiel ist die Verwendung von Push-Benachrichtigungen, um einen Dienst zu aktivieren. Worker. Der Nutzer wird durch eine Meldung wie „Neue Daten verfügbar“ gestört. Das Aktualisieren der Daten ist im Wesentlichen ein Nebeneffekt. Sie haben immer noch die Möglichkeit, Push-Benachrichtigungen für wirklich wichtige Updates, wie z. B. wichtige Eilmeldungen.

Eine regelmäßige Hintergrundsynchronisierung kann leicht mit der Hintergrundsynchronisierung verwechselt werden. Obwohl sie ähnliche Namen haben, unterscheiden sich ihre Anwendungsfälle. Unter anderem Hintergrundsynchronisierung wird am häufigsten verwendet, um Daten erneut an einen Server zu senden, wenn ein vorherige Anfrage ist fehlgeschlagen.

Nutzerinteraktionen richtig fördern

Falsche Vorgehensweise: Regelmäßige Synchronisierung im Hintergrund kann die Nutzer verschwenden Ressourcen. Vor der Veröffentlichung testete Chrome die App, ob sie richtig war. In diesem Abschnitt werden einige der Designentscheidungen von Chrome erläutert. um diese Funktion so hilfreich wie möglich zu gestalten.

Die erste Designentscheidung von Chrome war, dass eine Webanwendung nur regelmäßige nachdem ein Nutzer die App auf seinem Gerät installiert hat und als eigenständige Anwendung herausgebracht. Eine regelmäßige Hintergrundsynchronisierung ist nicht verfügbar. normalen Tabs in Chrome.

Da Chrome nicht möchte, dass ungenutzte oder selten verwendete Webanwendungen Akku oder Daten verbraucht, hat Chrome eine regelmäßige Hintergrundsynchronisierung so konzipiert, Entwickler müssen es verdienen, indem sie ihren Nutzern einen Mehrwert bieten. Ganz konkret: Chrome verwendet einen Interaktionswert für die Website. (about://site-engagement/), um festzustellen, ob und wie oft regelmäßige Hintergrundsynchronisierungen stattfinden können für eine bestimmte Webanwendung. Mit anderen Worten: Ein periodicsync-Ereignis wird erst ausgelöst, wenn die Interaktion der Wert größer als null ist und sich auf die Häufigkeit auswirkt, periodicsync-Ereignis ausgelöst. Dadurch wird sichergestellt, dass die einzigen Apps im Hintergrund sind diejenigen, die Sie aktiv verwenden.

Die regelmäßige Hintergrundsynchronisierung weist einige Ähnlichkeiten mit vorhandenen APIs auf und auf beliebten Plattformen. Zum Beispiel können eine einmalige Hintergrundsynchronisierung können Sie Push-Benachrichtigungen aktivieren, damit die Logik einer Web-App Service Worker) angezeigt, nachdem ein Nutzer die Seite geschlossen hat. Auf den meisten Plattformen dass Nutzer Apps installiert haben, die regelmäßig auf das Netzwerk zugreifen, den Hintergrund, um eine bessere User Experience bei wichtigen Updates zu bieten, Vorabrufen von Inhalten, Synchronisieren von Daten usw. Auch regelmäßige Hintergrundsynchronisierungen verlängert die Lebensdauer der Logik einer Web-App, damit sie für welchen Zeitraum in regelmäßigen Abständen ausgeführt wird kann jeweils nur ein paar Minuten dauern.

Lässt der Browser dies häufig und ohne Einschränkungen zu, zu Bedenken im Hinblick auf den Datenschutz führen. So hat Chrome dieses Problem behoben Risiko einer regelmäßigen Hintergrundsynchronisierung:

• Die Hintergrundsynchronisierung findet nur in einem Netzwerk statt, zuvor verbunden war. Chrome empfiehlt, nur Verbindungen zu Netzwerken herzustellen, die von vertrauenswürdigen Parteien.
• Wie bei der gesamten Internetkommunikation gibt eine regelmäßige Hintergrundsynchronisierung die IP-Adresse des Clients, des Servers, mit dem er kommuniziert, sowie den Namen der Server. Um diese Präsenz auf ungefähr das zu reduzieren, was es wäre, wenn die App nur wenn es im Vordergrund synchronisiert wurde, begrenzt der Browser die Häufigkeit Der Hintergrund der App wird synchronisiert, damit er mit der Häufigkeit der App-Nutzung übereinstimmt. Wenn die Person unterbricht häufig die Interaktion mit der App, regelmäßige Hintergrundsynchronisierung wird nicht mehr ausgelöst. Dies ist eine Nettoverbesserung gegenüber dem Status quo bei plattformspezifischen Apps.

Wann kann es verwendet werden?

Die Regeln für die Verwendung variieren je nach Browser. Zusammenfassend lässt sich sagen, dass Chrome folgende Anforderungen für die regelmäßige Hintergrundsynchronisierung:

• Ein bestimmter Nutzer-Engagement-Wert.
• Vorhandensein eines zuvor verwendeten Netzwerks.

Das Timing der Synchronisierungen wird nicht von Entwicklern gesteuert. Die die Synchronisierungshäufigkeit mit der Häufigkeit der App-Nutzung übereinstimmt. (Hinweis: plattformspezifische Apps können dies derzeit nicht.) Er versorgt auch die Stromversorgung und Verbindungsstatus.

Wann sollte sie verwendet werden?

Wenn der Service Worker aufwacht, um ein periodicsync-Ereignis zu bearbeiten, haben Sie die Gelegenheit, Daten anzufordern, aber nicht die Verpflichtung dazu. Bei der Handhabung das Ereignis, bei dem Sie die Netzwerkbedingungen und den verfügbaren Speicherplatz verschiedene Datenmengen herunterladen. Sie können finden Sie hier weitere Informationen:

• Network Information API
• Datensparmodus wird erkannt
• Verfügbaren Speicherplatz schätzen

Berechtigungen

Nachdem der Service Worker installiert wurde, verwenden Sie die Berechtigungen API, die abgefragt werden soll für periodic-background-sync. Dies kann in einem Fenster oder Service Worker-Kontext

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 eine regelmäßige Hintergrundsynchronisierung ein Service Worker erforderlich. Abrufen PeriodicSyncManager mit ServiceWorkerRegistration.periodicSync und rufe register(). Für die Registrierung sind ein Tag und ein Minimum Synchronisierungsintervall (minInterval). Das Tag identifiziert die registrierte Synchronisierung sodass mehrere Synchronisierungen registriert werden können. Im folgenden Beispiel lautet der Tag-Name 'content-sync' und minInterval sind 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.
  }
}

Eine Registrierung überprüfen

Rufen Sie periodicSync.getTags() auf, um ein Array von Registrierungs-Tags abzurufen. Die Im Beispiel unten wird anhand von Tag-Namen bestätigt, dass die Cache-Aktualisierung aktiv ist. noch einmal aktualisiert 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();
}

Du kannst auch getTags() verwenden, um eine Liste der aktiven Registrierungen in deinem Web aufzurufen auf der Seite mit den App-Einstellungen, sodass Nutzer bestimmte Arten von Aktualisierungen.

Auf regelmäßige Hintergrundsynchronisierungsereignisse reagieren

Fügen Sie ein periodicsync-Ereignis hinzu, um auf eine regelmäßige Hintergrundsynchronisierung zu reagieren zu Ihrem Service Worker hinzu. Das an sie übergebene event-Objekt enthält einen tag-Parameter, der dem bei der Registrierung verwendeten Wert entspricht. Wenn zum Beispiel ein Die regelmäßige Hintergrundsynchronisierung wurde unter dem Namen 'content-sync' registriert. Dann: event.tag ist dann '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.
});

Synchronisierung aufheben

Um eine registrierte Synchronisierung zu beenden, rufen Sie periodicSync.unregister() mit dem Namen des Sie die Registrierung aufheben möchten.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

Interfaces

Im Folgenden finden Sie eine kurze Übersicht über die Oberflächen, die im Rahmen des Programms „Periodic Background“ bereitgestellt werden. Sync API

• PeriodicSyncEvent Wird an den ServiceWorkerGlobalScope.onperiodicsync-Event-Handler übergeben bei einer je nachdem, welche Uhrzeit der Browser auswählt.
• PeriodicSyncManager Registriert regelmäßige Synchronisierungen und hebt ihre Registrierung auf und stellt Tags für registrierte synchronisiert. Rufen Sie eine Instanz dieser Klasse aus ServiceWorkerRegistration.periodicSync ab. Property.
• ServiceWorkerGlobalScope.onperiodicsync Registriert einen Handler für den Empfang von PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync Gibt einen Verweis auf PeriodicSyncManager zurück.

Beispiel

Inhalte werden aktualisiert

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() eingeschlossen, damit 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 einer vorhandenen Web-App hinzufügen

Diese Änderungen waren erforderlich, um Folgendes hinzuzufügen: Regelmäßige Hintergrundsynchronisierung mit einer vorhandenen PWA. Dieses Beispiel enthält eine Reihe hilfreicher Logging-Anweisungen, die die Status der regelmäßigen Hintergrundsynchronisierung in der Web-App.

Debugging

Es kann schwierig sein, einen umfassenden Überblick über die regelmäßige Hintergrundsynchronisierung zu erhalten. während Sie lokal testen. Informationen zu aktiven Registrierungen, ungefähre Synchronisierung Intervalle und Protokolle vergangener Synchronisierungsereignisse liefern bei der Fehlerbehebung wertvollen Kontext auf das Verhalten Ihrer Webanwendung. Glücklicherweise finden Sie all diese Informationen, mit einer experimentellen Funktion in den Chrome-Entwicklertools.

Lokale Aktivitäten werden aufgezeichnet

Der Abschnitt Regelmäßige Hintergrundsynchronisierung der Entwicklertools befasst sich mit wichtigen Ereignissen regelmäßiger Synchronisierungszyklus im Hintergrund: Registrierung für die Synchronisierung, Durchführung einer im Hintergrund synchronisieren und die Registrierung aufheben. Um Informationen zu diesen Ereignissen zu erhalten, Klicken Sie auf Aufzeichnung starten.

</ph> <ph type="x-smartling-placeholder">

Während der Aufzeichnung werden in den Entwicklertools Einträge für Ereignisse angezeigt, wobei Kontext und Metadaten jeweils protokolliert.

</ph> <ph type="x-smartling-placeholder">

Nach der einmaligen Aufzeichnung bleibt die Aufzeichnung bis zu drei Tage lang aktiviert. Entwicklertools ermöglichen, lokale Debugging-Informationen zu Hintergrundsynchronisierungen zu erfassen sogar Stunden in der Zukunft.

Ereignisse simulieren

Das Aufzeichnen von Hintergrundaktivitäten kann hilfreich sein, Ihren periodicsync-Handler sofort testen möchten, ohne auf einen bei normalem Rhythmus ausgelöst.

Dies ist über den Bereich Service Workers im Anwendungsbereich möglich. Chrome-Entwicklertools Im Feld Regelmäßige Synchronisierung können Sie ein Tag für die Ereignis zu verwenden, und lösen es beliebig oft aus.

Entwicklertools-Oberfläche verwenden

Ab Chrome 81 wird im Bereich Regelmäßige Hintergrundsynchronisierung Anwendung in den Entwicklertools.