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 Zeitverschwendung im Internet würden wir nicht wissen, dass Katzen Blumen mögen, Chamäleons lieben Blasen oder dass unser eigener Eric Bidelman ein Held beim Putt Putt der späten 90er ist.
Aber manchmal, nur manchmal, wollen wir keine Zeit verschwenden. Die gewünschte User Experience ist eher so:
- Smartphone nicht in der Tasche.
- Sie haben ein untergeordnetes Ziel erreicht.
- Smartphone zurück in Tasche.
- Lebensdauer fortsetzen.
Leider wird dies häufig durch eine schlechte Verbindung beeinträchtigt. Das haben wir alle schon erlebt. Du schaust auf einen weißen Bildschirm oder ein Kreiselsymbol und weißt, dass du einfach aufgeben und dein Leben fortsetzen solltest. Aber lass dir sicherheitshalber noch 10 Sekunden Zeit. 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. Sie warten also 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, du musst noch ein bisschen 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 Müll. 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, obwohl keine Verbindung besteht, wird die Nachricht zum Glück im Hintergrund gesendet, sobald eine Verbindung hergestellt wurde.
Seit März 2016 ist die Hintergrundsynchronisierung in Chrome ab Version 49 verfügbar. So kannst du dir die Funktion ansehen:
- Öffnen Sie Emojoy.
- Gehe offline (entweder im Flugmodus oder besuche deinen Faraday-Käfig in deiner Nähe).
- 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. Dann warten Sie auf dieses Ereignis und tun alles, was Sie tun müssen.
Wie bei Push-Mitteilungen wird ein Dienst-Worker als Ereignisziel verwendet. Dadurch funktioniert die Funktion auch, 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 jeweiligen Versuchs angibt. Wenn das der Fall ist, ist die Synchronisierung abgeschlossen. Wenn er fehlschlägt, wird eine weitere Synchronisierung 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.
Diese einfache Demo erfüllt nur das Minimum. 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, Änderungen an Einstellungen, Foto-Uploads... alles, was Sie auf dem Server erreichen möchten, auch wenn der Nutzer den Tab verlässt oder zu einem anderen Ort wechselt. 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!
Dies ist die Offline-Wikipedia-Demo, die ich für die Funktion Seitenaufbau optimieren 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.
- Offline gehen (entweder im Flugmodus oder bei einem schlechten Mobilfunkanbieter).
- Klicken Sie auf einen Link zu einem anderen Artikel.
- Sie sollten eine Mitteilung erhalten, dass die Seite nicht geladen werden konnte. Dies wird auch angezeigt, wenn das Laden der Seite eine Weile 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, wann 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 Enhancement
Es wird eine Weile dauern, bis alle Browser die Hintergrundsynchronisierung unterstützen, insbesondere da Safari und Edge Service Worker noch nicht unterstützen. Progressive Enhancement ist hier jedoch hilfreich:
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. Dafür ist natürlich eine Nutzerberechtigung erforderlich. Außerdem hängt es vom Browser ab, wann und wie oft diese Ereignisse ausgelöst werden. 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.