Jetzt neu: Hintergrundsynchronisierung

Archibald
Jake Archibald

Die Hintergrundsynchronisierung ist eine neue Web-API, mit der Sie Aktionen so lange aufschieben können, bis der Nutzer eine stabile Verbindung hat. Dadurch wird sichergestellt, dass alles, was der Nutzer senden möchte, auch wirklich gesendet wird.

Das Problem

Das Internet ist ein toller Ort, um Zeit zu verschwenden. Ohne das Internet zu verschwenden, wüssten wir nicht, dass Katzen Blumen nicht mögen, Chamäleons verlieben oder dass unser eigener Eric Bidelman ein Held der späten 90er im Golfspiel ist.

Aber manchmal, nur manchmal, wollen wir keine Zeit verschwenden. Die gewünschte User Experience sieht eher wie folgt aus:

  1. Smartphone aus der Tasche.
  2. Kleineres Ziel erreichen.
  3. Smartphone-Rückseite in der Tasche.
  4. Leben fortsetzen.

Leider wird diese Funktion häufig durch eine schlechte Verbindung beeinträchtigt. Das haben wir alle schon erlebt. Sie schauen auf einen weißen Bildschirm oder ein Kreiselsymbol und wissen, dass Sie einfach aufgeben und mit Ihrem Leben weitermachen sollten, aber noch 10 Sekunden warten, bevor Sie es sicher sind. Nach diesen 10 Sekunden? Nichts.

Aber warum jetzt aufgeben? Du hast bereits Zeit investiert, daher wäre es eine Verschwendung, einfach wegzugehen. Du musst also weiter warten. An diesem Punkt möchten Sie aufgeben, wissen aber, dass dies die Sekunde ist, bevor alles geladen wäre, wenn Sie nur gewartet hätten.

Service Worker lösen den Seitenaufbau, indem sie Inhalte aus einem Cache bereitstellen. Aber was ist, wenn die Seite etwas an den Server senden muss?

Wenn der Nutzer bei einer Nachricht auf „Senden“ klickt, muss er bis zum Ende auf ein rotierendes Ladesymbol starren. Wenn sie versuchen, die Seite zu verlassen oder den Tab zu schließen, verwenden wir onbeforeunload, um eine Meldung wie „Nein, du musst noch etwas mehr in dieses Kreiselsymbol starren. Entschuldigung“. Wenn der Nutzer keine Verbindung hat, wird er darauf hingewiesen, dass Sie es später noch einmal versuchen müssen.

Das ist Müll. Mit der Hintergrundsynchronisierung kannst du noch mehr erledigen.

Die Lösung

Das folgende Video zeigt Emojoy, eine Chat-Demo nur für Emojis. Es ist eine progressive Web-App, die offline verwendet werden kann. Die App verwendet Push-Nachrichten, Benachrichtigungen und die Synchronisierung im Hintergrund.

Wenn der Nutzer versucht, eine Nachricht zu senden, obwohl keine Verbindung besteht, wird die Nachricht glücklicherweise im Hintergrund gesendet, sobald eine Verbindung besteht.

Seit März 2016 ist die Hintergrundsynchronisierung ab Version 49 in Chrome verfügbar. Gehen Sie dazu so vor:

  1. Öffnen Sie Emojoy.
  2. Gehe entweder im Flugmodus oder besuche den Faraday-Käfig in deiner Nähe.
  3. Geben Sie eine Nachricht ein.
  4. Kehren Sie zum Startbildschirm zurück. Optional können Sie den Tab oder den Browser schließen.
  5. Gehen Sie online.
  6. Die Nachricht wird im Hintergrund gesendet.

Wenn das Senden im Hintergrund erfolgt, kann dies zu einer empfundenen Leistungsverbesserung führen. Die App muss sich um das Senden von Nachrichten nicht so aufwändig sein, sodass sie die Nachricht sofort zur Ausgabe hinzufügen kann.

So fordern Sie eine Synchronisierung im Hintergrund an

Beim erweiterbaren Web-Stil handelt es sich um eine untergeordnete Funktion, die Ihnen die Freiheit gibt, das zu tun, was Sie benötigen. Sie fordern ein Ereignis an, das ausgelöst wird, wenn der Nutzer eine Verbindung hat. Dies geschieht unmittelbar, wenn der Nutzer bereits eine Verbindung hat. Dann warten Sie auf dieses Ereignis und tun alles, was Sie tun müssen.

Wie bei Push-Benachrichtigungen wird auch hier ein Service Worker als Ereignisziel verwendet. Dadurch kann der Dienst auch dann ausgeführt werden, wenn die Seite nicht geöffnet ist. Registrieren Sie sich zuerst auf einer Seite für eine Synchronisierung:

// 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. Im obigen Beispiel sollte doSomeStuff() ein Versprechen zurückgeben, das den Erfolg oder Misserfolg des zu tunden Versuchs anzeigt. Wenn dies der Fall ist, ist die Synchronisierung abgeschlossen. Wenn er fehlschlägt, wird ein neuer Versuch geplant. Wiederholungssynchronisierungen warten auch auf eine Verbindung und verwenden einen exponentiellen Backoff.

Der Tag-Name der Synchronisierung (im obigen Beispiel "myFirstSync") sollte für eine bestimmte Synchronisierung eindeutig sein. Wenn Sie sich für eine Synchronisierung mit demselben Tag registrieren wie für eine ausstehende Synchronisierung, wird diese mit der vorhandenen Synchronisierung zusammengeführt. Das bedeutet, dass Sie sich jedes Mal für die Synchronisierung des Postausgangs registrieren können, wenn ein Nutzer eine Nachricht sendet. Wenn ein Nutzer jedoch fünf Nachrichten sendet, während er offline ist, erhalten Sie nur eine Synchronisierung, sobald er online ist. Wenn Sie fünf separate Synchronisierungsereignisse wünschen, verwenden Sie einfach eindeutige Tags.

In dieser einfachen Demo sehen Sie das Minimum. Es wird das Synchronisierungsereignis verwendet, um eine Benachrichtigung anzuzeigen.

Wozu kann ich die Hintergrundsynchronisierung nutzen?

Idealerweise sollten Sie damit die für Sie wichtigen Daten über die gesamte Dauer der Seite hinaus planen. Chatnachrichten, E-Mails, Dokumentaktualisierungen, Einstellungsänderungen, Fotouploads... alle Elemente, die den Server erreichen möchten, auch wenn der Nutzer die Seite verlässt oder den Tab schließt. Die Seite könnte diese in einem Speicher „Postausgang“ in indizierterDB speichern, und der Service Worker würde sie abrufen und senden.

Sie könnten sie aber auch verwenden, um kleine Datenmengen abzurufen...

Noch eine Demo!

Dies ist die Offline-Wikipedia-Demo, die ich zum Thema Supercharging Page Load erstellt habe. Seitdem habe ich einige Magie für die Hintergrundsynchronisierung hinzugefügt.

Probieren Sie es selbst aus. Vergewissern Sie sich, dass Sie Chrome 49 oder höher verwenden, und führen Sie dann folgende Schritte aus:

  1. Rufen Sie einen beliebigen Artikel auf, zum Beispiel Chrome.
  2. Geh offline (entweder über den Flugmodus oder schließe dich einem schrecklichen Mobilfunkanbieter wie ich an).
  3. Klicken Sie auf einen Link zu einem anderen Artikel.
  4. Sie sollten darüber informiert werden, dass die Seite nicht geladen werden konnte. Dies wird auch angezeigt, wenn das Laden der Seite eine Weile dauert.
  5. Benachrichtigungen zulassen.
  6. Schließen Sie den Browser.
  7. Online gehen
  8. Du wirst benachrichtigt, wenn der Artikel heruntergeladen, im Cache gespeichert und bereit zum Ansehen ist.

Mithilfe dieses Musters kann der Nutzer sein Smartphone in die Hosentasche stecken und mit seinem Leben weitermachen, denn das Smartphone benachrichtigt ihn, wenn er das gewünschte Ziel abgerufen hat.

Berechtigungen

In den Demos, die ich gezeigt habe, werden Webbenachrichtigungen verwendet, die eine Berechtigung erfordern, die Hintergrundsynchronisierung selbst jedoch nicht.

Synchronisierungsereignisse werden häufig abgeschlossen, während der Nutzer eine Seite für die Website geöffnet hat. Daher wäre es nicht so einfach, eine Nutzerberechtigung zu verlangen. Stattdessen beschränken wir, wann Synchronisierungen registriert und ausgelöst werden können, um Missbrauch zu verhindern. Beispiel:

  • Sie können sich nur dann für ein Synchronisierungsereignis registrieren, wenn der Nutzer ein Fenster zur Website geöffnet hat.
  • Die Ausführungszeit der Veranstaltung ist begrenzt. Du kannst sie also nicht verwenden, um einen Server alle x Sekunden zu pingen oder Bitcoins zu minen.

Natürlich können diese Beschränkungen je nach realer Nutzung gelockert oder verschärft werden.

Progressive Enhancement

Es wird eine Weile dauern, bis alle Browser die Hintergrundsynchronisierung unterstützen, insbesondere da Safari und Edge noch keine Service Worker unterstützen. Dabei hilft Progressive Enhancement:

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 den Inhalt der Seite einfach wie gewohnt.

Es lohnt sich auch dann, die Hintergrundsynchronisierung zu verwenden, wenn der Nutzer eine gute Konnektivität scheint, da Sie so vor Navigation und Tab-Schließung während der Datenübertragung geschützt sind.

Die Zukunft

Wir möchten die Hintergrundsynchronisierung in der ersten Hälfte des Jahres 2016 auf eine stabile Version von Chrome übertragen und arbeiten gleichzeitig an einer Variante, der "regelmäßigen Hintergrundsynchronisierung". Mit der regelmäßigen Hintergrundsynchronisierung können Sie ein Ereignis anfordern, das durch Zeitintervall, Akkustatus und Netzwerkstatus eingeschränkt ist. Dazu ist natürlich eine Nutzerberechtigung erforderlich und es hängt auch vom Browser ab, wann und wie oft diese Ereignisse ausgelöst werden. Anders ausgedrückt: Eine Nachrichten-Website könnte eine stündliche Synchronisierung anfordern, aber der Browser weiß möglicherweise, dass Sie diese Website nur um 07:00 Uhr gelesen haben, sodass die Synchronisierung täglich um 06:50 Uhr ausgelöst wird. Diese Idee ist etwas weiter weg als die einmalige Synchronisierung, aber sie wird noch kommen.

Nach und nach bringen wir erfolgreiche Muster aus Android und iOS ins Web und bewahren gleichzeitig, was das Web so großartig macht.