Die Hintergrundsynchronisierung ist eine neue Web-API, mit der Sie Aktionen verschieben können, bis der Nutzer eine stabile Verbindung hat. So wird sichergestellt, dass der Nutzer genau das senden kann, was er möchte.
Das Problem
Das Internet ist ein guter Ort, um Zeit zu verschwenden. Ohne Zeit im Internet zu verschwenden, würden wir nicht wissen, dass Katzen Blumen nicht mögen, Chamäleons Blasen lieben oder dass unser eigener Eric Bidelman ein Putt-Putt-Golfheld der späten 90er-Jahre ist.
Aber manchmal, nur manchmal, wollen wir keine Zeit verschwenden. Die gewünschte Nutzererfahrung sieht eher so aus:
- Smartphone nicht in der Tasche.
- Sie haben ein untergeordnetes Ziel erreicht.
- Smartphone wieder in die Tasche stecken.
- Sie können Ihr Leben fortsetzen.
Leider wird dies häufig durch eine schlechte Verbindung beeinträchtigt. Das haben wir alle schon erlebt. Sie starren auf einen weißen Bildschirm oder ein rotierendes Ladesymbol und wissen, dass Sie einfach aufgeben und mit Ihrem Leben weitermachen sollten. Sie warten aber zur Sicherheit noch 10 Sekunden. Was passiert nach diesen 10 Sekunden? Nichts.
Aber warum jetzt aufgeben? Sie haben bereits Zeit investiert, daher wäre es eine Verschwendung, ohne Ergebnis nach Hause zu gehen. Also warten Sie weiter. An diesem Punkt möchten Sie aufgeben, aber Sie wissen, dass die Sekunde, in der Sie das tun, die Sekunde vor dem Laden aller Inhalte ist, wenn Sie nur gewartet hätten.
Dienstworker lösen das Problem beim Laden von Seiten, da Sie damit Inhalte aus einem Cache bereitstellen können. Was ist aber, wenn die Seite etwas an den Server senden muss?
Wenn Nutzer derzeit auf „Senden“ klicken, sehen sie einen Ladebalken, bis die Nachricht gesendet wurde. Wenn der Nutzer versucht, den Tab zu schließen oder zu wechseln, wird mit onbeforeunload eine Meldung wie „Nein, Sie müssen noch etwas länger auf das Ladesymbol starren. Es tut mir leid.“ Wenn der Nutzer keine Verbindung hat, sagen wir ihm: Bitte versuchen Sie es später noch einmal.
Das ist Unsinn. Mit der Hintergrundsynchronisierung können Sie noch mehr erreichen.
Die Lösung
Im folgenden Video wird Emojoy gezeigt, eine Demo für einen Emoji-Chat. Es handelt sich um eine progressive Web-App, die zuerst offline funktioniert. Die App verwendet Push-Nachrichten und Benachrichtigungen sowie die Hintergrundsynchronisierung.
Wenn der Nutzer versucht, eine Nachricht zu senden, ohne eine Internetverbindung zu haben, wird die Nachricht im Hintergrund gesendet, sobald eine Verbindung besteht.
Seit März 2016 ist die Hintergrundsynchronisierung in Chrome ab Version 49 verfügbar. So kannst du dir die Funktion ansehen:
- Öffnen Sie Emojoy.
- Gehen Sie offline (entweder über den Flugmodus oder indem Sie sich in einen Faradayschen Käfig begeben).
- Geben Sie eine Nachricht ein.
- Kehren Sie zum Startbildschirm zurück. Optional können Sie den Tab oder Browser schließen.
- Gehen Sie online.
- Die Nachricht wird im Hintergrund gesendet.
Die Möglichkeit, Daten im Hintergrund zu senden, führt außerdem zu einer wahrgenommenen Leistungssteigerung. Die App muss das Senden der Nachricht nicht so kompliziert gestalten, sodass sie die Nachricht direkt der Ausgabe hinzufügen kann.
Hintergrundsynchronisierung anfordern
Im echten extensible web-Stil ist dies eine Low-Level-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. Das Ereignis wird sofort ausgelöst, wenn der Nutzer bereits eine Verbindung hat. Anschließend warten Sie auf dieses Ereignis und führen die erforderlichen Aktionen aus.
Wie bei Push-Mitteilungen wird ein Dienst-Worker als Ereignisziel verwendet. Dadurch kann die Funktion auch dann verwendet 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 der Aktion angibt. Wenn das Versprechen erfüllt wird, ist die Synchronisierung abgeschlossen. Falls der Vorgang fehlschlägt, wird ein neuer Synchronisierungsversuch geplant. Auch bei wiederholten Synchronisierungen wird auf eine Verbindung gewartet und ein exponentielles Backoff verwendet.
Der Tag-Name der Synchronisierung (im obigen Beispiel „myFirstSync“) muss für eine bestimmte Synchronisierung eindeutig sein. Wenn Sie eine Synchronisierung mit demselben Tag wie eine ausstehende Synchronisierung registrieren, werden die Synchronisierungen zusammengeführt. Das bedeutet, dass Sie sich für eine Synchronisierung mit dem Status „Posteingang leeren“ registrieren können, sobald der Nutzer eine Nachricht sendet. Wenn er 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 benötigen, verwenden Sie einfach eindeutige Tags.
Hier ist eine einfache Demo, die das Nötigste tut: Sie verwendet das Synchronisierungsereignis, um eine Benachrichtigung anzuzeigen.
Wofür kann ich die Hintergrundsynchronisierung verwenden?
Idealerweise sollten Sie damit alle Datenübertragungen planen, die über die Lebensdauer der Seite hinausgehen. Chatnachrichten, E-Mails, Dokumentaktualisierungen, Einstellungenänderungen, Fotouploads – alles, was den Server erreichen soll, auch wenn der Nutzer den Tab verlässt oder schließt. Die Seite könnte diese in einem „Outbox“-Speicher in indexedDB speichern und der Service Worker würde sie abrufen und senden.
Sie können damit aber auch kleine Datenmengen abrufen…
Noch eine Demo!
Das ist die Demo der offline Wikipedia, die ich für Supercharging Page Load erstellt habe. Ich habe ihm inzwischen eine Hintergrundsynchronisierung hinzugefügt.
Probieren Sie es selbst aus. Sie müssen Chrome 49 oder höher verwenden. Gehen Sie dann so vor:
- Rufen Sie einen beliebigen Artikel auf, z. B. Chrome.
- Gehen Sie offline (entweder über den Flugmodus oder mit einem schlechten Mobilfunkanbieter wie meinem).
- Klicken Sie auf einen Link zu einem anderen Artikel.
- 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.
- Sie müssen Benachrichtigungen zulassen.
- Schließen Sie den Browser.
- Online gehen
- Sie werden benachrichtigt, wenn der Artikel heruntergeladen, im Cache gespeichert und zum Ansehen bereit ist.
Mit diesem Muster kann der Nutzer sein Smartphone in die Tasche stecken und sich um andere Dinge kümmern, in dem Wissen, dass er benachrichtigt wird, wenn das gewünschte Produkt gefunden wurde.
Berechtigungen
In den von mir gezeigten Demos werden Webbenachrichtigungen verwendet, für die eine Berechtigung erforderlich ist. Die Hintergrundsynchronisierung selbst erfordert jedoch keine.
Synchronisierungsereignisse werden oft abgeschlossen, während der Nutzer eine Seite der Website geöffnet hat. Die Nutzereinwilligung wäre daher nicht nutzerfreundlich. Stattdessen beschränken wir die Zeiträume, in denen Synchronisierungen registriert und ausgelöst werden können, um Missbrauch zu verhindern. Beispiel:
- Sie können sich nur für ein Synchronisierungsereignis registrieren, wenn der Nutzer ein Fenster mit der Website geöffnet hat.
- Die Ausführungszeit von Ereignissen ist begrenzt. Sie können sie also nicht verwenden, um alle x Sekunden einen Server zu pingen, Bitcoins zu minen oder ähnliches.
Diese Einschränkungen können sich je nach tatsächlicher Nutzung lockern oder verschärfen.
Progressive Verbesserung
Es wird noch einige Zeit dauern, bis alle Browser die Hintergrundsynchronisierung unterstützen, insbesondere da Safari und Edge noch keine Dienstprogramme unterstützen. Progressive Verbesserung hilft hier:
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 gewohnt über die Seite.
Die Hintergrundsynchronisierung lohnt sich auch, wenn der Nutzer eine gute Verbindung zu haben scheint, da sie Sie vor Navigationen und Tab-Schließungen während der Datenübertragung schützt.
Die Zukunft
Wir möchten die Hintergrundsynchronisierung in der ersten Jahreshälfte 2016 in einer stabilen Version von Chrome einführen und arbeiten derzeit an einer Variante, der „regelmäßigen Hintergrundsynchronisierung“. Bei der periodischen Hintergrundsynchronisierung können Sie ein Ereignis anfordern, das durch Zeitintervall, Akkustand und Netzwerkstatus eingeschränkt ist. Dazu ist natürlich die Nutzererlaubnis erforderlich. Wann und wie oft diese Ereignisse ausgelöst werden, hängt vom Browser ab. Mit anderen Worten: Eine Nachrichtenwebsite kann eine stündliche Synchronisierung anfordern, der Browser weiß aber möglicherweise, dass Sie diese Website nur um 7:00 Uhr lesen. Die Synchronisierung wird dann täglich um 6:50 Uhr ausgeführt. Diese Funktion ist noch nicht verfügbar, wird aber bald eingeführt.
Wir führen nach und nach erfolgreiche Muster aus Android und iOS in das Web ein, ohne dabei die Vorteile des Webs zu verlieren.