Jetzt neu: Hintergrundsynchronisierung

Jake Archibald

Veröffentlicht am: 08.12.2015

Die Hintergrundsynchronisierung ist eine Web-API, mit der Sie Aktionen aufschieben können, bis der Nutzer eine stabile Verbindung hat. So können Nutzer alle gewünschten Dateien senden, sobald dies möglich ist.

Das Problem

Das Internet ist ein toller Ort, um Zeit zu verschwenden. Ohne Zeit im Internet zu verschwenden, wüssten wir nicht, dass Katzen keine Blumen mögen, Chamäleons Blasen lieben, oder dass Eric Bidelman in den späten 90er-Jahren ein Putt-Putt-Golfheld war.

Manchmal möchten wir aber keine Zeit verschwenden. Die ideale Nutzer erfahrung sieht eher so aus:

1. Smartphone aus der Tasche nehmen.
2. Kleines Ziel erreichen.
3. Smartphone wieder in die Tasche stecken.
4. Mit dem Leben weitermachen.

Leider wird diese Erfahrung häufig durch eine schlechte Verbindung beeinträchtigt. Das kennen wir alle nur zu gut. Sie starren auf einen weißen Bildschirm oder einen Spinner und wissen, dass Sie einfach aufgeben und mit Ihrem Leben weitermachen sollten, aber Sie geben ihm noch 10 Sekunden. Und nach diesen 10 Sekunden? Nichts.

Warum jetzt aufgeben? Sie haben bereits Zeit investiert. Wenn Sie jetzt aufgeben, wäre das eine Verschwendung. Also warten Sie weiter. An diesem Punkt wollen Sie aufgeben, aber Sie wissen, dass genau in dem Moment, in dem Sie das tun, alles geladen wäre, wenn Sie nur gewartet hätten.

Service Worker lösen das Problem des Seitenladens, indem Sie Inhalte aus einem Cache bereitstellen. Aber was ist, wenn die Seite etwas an den Server senden muss?

Wenn der Nutzer derzeit auf „Senden“ klickt, muss er auf einen Spinner starren, bis der Vorgang abgeschlossen ist. Wenn er versucht, die Seite zu verlassen oder den Tab zu schließen, verwenden wir onbeforeunload, um eine Meldung wie „Nein, Sie müssen noch etwas auf diesen Spinner starren. Entschuldigung“ anzuzeigen. Wenn der Nutzer keine Verbindung hat, teilen wir ihm mit: „Entschuldigung, Sie müssen später wiederkommen und es noch einmal versuchen.“

Mit der Hintergrundsynchronisierung können Sie es besser machen.

Die Lösung

Das folgende Video zeigt Emojoy, eine Chatdemo, die nur Emojis verwendet. Es ist eine progressive Web-App, die offline-first funktioniert. Die App verwendet Push-Nachrichten und ‑Benachrichtigungen sowie die Hintergrundsynchronisierung.

Wenn der Nutzer versucht, eine Nachricht zu senden, obwohl er keine Verbindung hat, wird die Nachricht im Hintergrund gesendet, sobald er eine Verbindung hat.

Die Möglichkeit, Nachrichten im Hintergrund zu senden, führt auch zu einer wahrgenommenen Leistungssteigerung. Die App muss das Senden der Nachricht nicht so aufwendig gestalten, sondern kann die Nachricht sofort zur Ausgabe hinzufügen.

Die Hintergrundsynchronisierung ist ab Chrome 49 verfügbar.

Hintergrundsynchronisierung anfordern

Im Stil des erweiterbaren Webs ist dies eine Funktion auf niedriger Ebene, die Ihnen die Freiheit gibt, das zu tun, was Sie brauchen. Sie fordern an, dass ein Ereignis ausgelöst wird, wenn der Nutzer eine Verbindung hat. Das erfolgt sofort, wenn der Nutzer bereits eine Verbindung hat. Dann warten Sie auf dieses Ereignis und tun, was Sie tun müssen.

Wie bei Push-Nachrichten wird ein Service Worker als Ereignisziel verwendet, sodass die Funktion auch funktioniert, wenn die Seite nicht geöffnet ist. Registrieren Sie zuerst eine Synchronisierung auf einer Seite:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

Webseite. doSomeStuff() sollte ein Promise zurückgeben, das den Erfolg oder Misserfolg des Vorgangs angibt. Wenn das Promise erfüllt wird, ist die Synchronisierung abgeschlossen. Wenn der Vorgang fehlschlägt, wird eine weitere Synchronisierung geplant, um es noch einmal zu versuchen. Auch bei Synchronisierungsversuchen wird auf eine Verbindung gewartet und ein exponentieller Backoff verwendet.

Der Tag-Name der Synchronisierung („myFirstSync“ im Beispiel) muss für eine bestimmte Synchronisierung eindeutig sein. Wenn Sie eine Synchronisierung mit demselben Tag wie eine ausstehende Synchronisierung registrieren, wird sie mit der vorhandenen Synchronisierung zusammengeführt. Das bedeutet, dass Sie jedes Mal, wenn der Nutzer eine Nachricht sendet, eine Synchronisierung vom Typ „clear-outbox“ registrieren können. Wenn er jedoch 5 Nachrichten sendet, während er offline ist, erhalten Sie nur eine Synchronisierung, wenn er wieder online ist. Wenn Sie 5 separate Synchronisierungsereignisse erhalten möchten, verwenden Sie eindeutige Tags.

In dieser Demo wird das Synchronisierungsereignis verwendet, um eine Benachrichtigung anzuzeigen.

Anwendungsfälle für die Hintergrundsynchronisierung

Im Idealfall verwenden Sie die Funktion, um das Senden von Daten zu planen, die über die Lebensdauer der Seite hinaus wichtig sind. Chatnachrichten, E-Mails, Dokumentaktualisierungen, Einstellungsänderungen, Fotouploads oder alle Inhalte, die den Server erreichen sollen, auch wenn der Nutzer die Seite verlässt oder den Tab schließt. Die Seite kann diese Daten in einem „Postausgang“ in IndexedDB speichern. Der Service Worker ruft sie dann ab und sendet sie.

Sie können die Funktion aber auch verwenden, um kleine Datenmengen abzurufen.

Offline-Wikipedia-Demo

Dies ist die Offline-Wikipedia-Demo, die ich für Supercharging Page Load erstellt habe. Ich habe ihr inzwischen etwas Hintergrundsynchronisierungs-Magie hinzugefügt.

Probieren Sie es selbst aus:

1. Lassen Sie Ihren Browser in diesem Tab geöffnet.
2. Gehen Sie in den Offlinemodus, indem Sie den Flugmodus aktivieren oder WLAN deaktivieren.
3. Klicken Sie auf einen Link zu einem anderen Artikel.
4. Sie sollten eine Meldung erhalten, dass die Seite nicht geladen werden konnte. Diese Meldung wird auch angezeigt, wenn das Laden der Seite nur etwas länger dauert.
5. Stimmen Sie Benachrichtigungen zu.
6. Schließen Sie den Browser.
7. Online gehen
8. Sie werden benachrichtigt, wenn der Artikel heruntergeladen und im Cache gespeichert wurde und jetzt angezeigt werden kann.

Mit diesem Muster kann der Nutzer sein Smartphone in die Tasche stecken und mit seinem Leben weitermachen. Er wird benachrichtigt, wenn das Smartphone das gefunden hat, was er wollte.

Berechtigungen

In den Demos, die ich gezeigt habe, werden Webbenachrichtigungen verwendet, für die eine Berechtigung erforderlich ist. Für die Hintergrundsynchronisierung selbst ist keine Berechtigung erforderlich.

Synchronisierungsereignisse werden oft abgeschlossen, während der Nutzer eine Seite der Website geöffnet hat. Eine Nutzerberechtigung wäre daher nicht sinnvoll. Stattdessen beschränken wir, wann Synchronisierungen registriert und ausgelöst werden können, um Missbrauch zu verhindern. Beispiel:

• Sie können ein Synchronisierungsereignis nur registrieren, wenn der Nutzer ein Fenster zur Website geöffnet hat.
• Die Ausführungszeit des Ereignisses ist begrenzt. Sie können es also nicht verwenden, um alle x Sekunden einen Server zu pingen, Bitcoins zu minen oder Ähnliches.

Diese Einschränkungen können je nach tatsächlicher Nutzung gelockert oder verschärft werden.

Progressive Enhancement

Während wir darauf warten, dass die Hintergrundsynchronisierung zur Baseline wird, können Sie sie als ein Progressive Enhancement verwenden:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

Wenn Service Worker oder die Hintergrundsynchronisierung nicht verfügbar sind, posten Sie die Inhalte einfach wie bisher von der Seite aus.

Es lohnt sich, die Hintergrundsynchronisierung auch dann zu verwenden, wenn der Nutzer eine gute Verbindung zu haben scheint, da sie Sie vor Navigationen und Tab-Schließungen während des Datensendens schützt.

Die Zukunft

Wir möchten die Hintergrundsynchronisierung in der ersten Hälfte des Jahres 2016 in einer stabilen Version von Chrome veröffentlichen und gleichzeitig an einer Variante arbeiten: der periodischen Hintergrundsynchronisierung. Mit der periodischen Hintergrundsynchronisierung können Sie ein Ereignis anfordern, das durch Zeitintervall, Akkustand und Netzwerkstatus eingeschränkt ist. Dafür ist natürlich eine Nutzerberechtigung erforderlich. Außerdem liegt es am Browser, wann und wie oft diese Ereignisse ausgelöst werden. Eine Nachrichtenseite könnte beispielsweise anfordern, dass die Synchronisierung jede Stunde erfolgt. Der Browser weiß aber möglicherweise, dass Sie diese Website nur um 7:00 Uhr lesen. Daher würde die Synchronisierung täglich um 6:50 Uhr ausgelöst. Diese Idee ist noch etwas weiter entfernt als die einmalige Synchronisierung, aber sie kommt.

Nach und nach bringen wir erfolgreiche Muster von Android und iOS ins Web und behalten dabei das bei, was das Web so großartig macht.