Hintergrundsynchronisierung ist ein neues Web-API, mit dem Aktionen aufgeschoben werden können, bis der Nutzer Konnektivität haben. Dadurch wird sichergestellt, dass alles, was der Nutzer senden möchte, auch tatsächlich gesendet wird.
Das Problem
Das Internet ist ein großartiger Ort, um Zeit zu verschwenden. Ohne Zeitverschwendung im Internet würden wir nicht wissen, dass Katzen Blumen mögen, Chamäleons lieben Blasen, und dass unser eigener Eric Bidelman ein Held beim Putt Putt der späten 90er ist.
Aber manchmal, einfach manchmal wollen wir keine Zeit verschwenden. Den gewünschten Nutzer User Experience ist eher wie:
- Smartphone aus der Tasche.
- Kleineres Ziel erreichen
- Smartphone zurück in Tasche.
- Lebensdauer fortsetzen.
Leider kommt es häufig zu einer schlechten Verbindung. 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. Nach diesen 10 Sekunden? Nichts.
Aber warum jetzt aufgeben? Sie haben bereits Zeit investiert, also wäre es Verschwendung, einfach nichts davon zu wegzulaufen und so lange warten zu müssen. Zu diesem Zeitpunkt möchten Sie aufgeben, aber Sie wissen, dass die Sekunde genau der zweite ist, bevor alles geladen wäre, wenn Sie nur gewartet hätten.
Service Worker lösen das Laden der Seite, da Sie Inhalte aus einem Cache bereitstellen können. Aber was ist, wenn die Seite etwas an den Server senden muss?
Wenn der Nutzer derzeit auf „Senden“ klickt, müssen sie bei einer Nachricht auf ein Kreiselsymbol starren, bis der Vorgang abgeschlossen ist. Wenn sie versuchen, die Seite zu verlassen oder den Tab zu schließen, verwenden wir onbeforeunload, um eine Meldung wie „Nein, ich muss das Kreiselsymbol noch einmal anstarren“ anzuzeigen. Tut uns 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 sind Sie besser vorbereitet.
Die Lösung
Das folgende Video zeigt Emojoy, eine reine Emoji-Chatdemo. Es ist eine progressive Web-App, die offline funktioniert. Die App nutzt 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 können Sie die Aktion sehen:
- Ö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 den Browser schließen).
- Gehen Sie online.
- Die Nachricht wird im Hintergrund gesendet.
Die Möglichkeit, diese Nachrichten im Hintergrund zu senden, führt ebenfalls zu einer empfundenen Leistungsverbesserung. Die App muss sich nicht um das Senden der Nachricht kümmern und kann die Nachricht direkt zur Ausgabe hinzufügen.
Hintergrundsynchronisierung anfordern
Im echten Extensible Web-Stil ist dies ein Low-Level-Funktion, die Ihnen die Freiheit gibt, das zu tun, was Sie brauchen. Sie bitten um eine Ereignis, das ausgelöst wird, wenn der Nutzer eine Verbindung hat. Dies geschieht sofort, wenn der Nutzer ist bereits mit dem Internet verbunden. Dann warten Sie auf dieses Ereignis und tun, was auch immer Sie was Sie tun müssen.
Wie bei Push-Nachrichten wird auch hier ein Service Worker als Ereignisziel verwendet, sodass er auch dann funktioniert, 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 Ziels angibt. Wenn sie erfüllt ist, ist die Synchronisierung abgeschlossen. Wenn er fehlschlägt, wird eine weitere Synchronisierung geplant. Synchronisierungswiederholungen 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 wie eine ausstehende Synchronisierung registrieren, wird es mit der vorhandenen Synchronisierung zusammengeführt. Sie können sich also für einen "clear-outbox"-Post wird jedes Mal synchronisiert, wenn der Nutzer eine Nachricht sendet. Wenn er jedoch fünf Nachrichten im Offline-Modus sendet, wird nur eine Synchronisierung durchgeführt, sobald der Nutzer wieder online ist. Wenn Sie fünf separate Synchronisierungsereignisse wünschen, verwenden Sie einfach eindeutige Tags.
Hier ist eine einfache Demo, die das absolute Minimum erfüllt: verwendet es das Synchronisierungsereignis, um eine Benachrichtigung anzuzeigen.
Wozu kann ich die Hintergrundsynchronisierung verwenden?
Idealerweise sollten Sie damit das Senden von Daten planen, die Ihnen wichtig sind, außerhalb der Lebensdauer der Seite. 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. Diese Elemente könnten auf der Seite in einem Postausgang gespeichert werden. und der Service Worker ruft sie ab und sendet sie.
Sie könnten sie aber auch verwenden, um kleine Datenmengen abzurufen...
Noch eine Demo!
Dies ist die Offline-Wikipedia-Demo, die ich für die Funktion Seitenaufbau optimieren erstellt habe. Seitdem habe ich ein wenig Magie für die Hintergrundsynchronisierung hinzugefügt.
Probieren Sie es selbst aus. Verwenden Sie Chrome 49 oder höher und gehen Sie dann so vor:
- Rufen Sie einen beliebigen Artikel auf, zum Beispiel 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.
- Benachrichtigungen zustimmen.
- Schließen Sie den Browser.
- Online gehen
- Du wirst benachrichtigt, wenn der Artikel heruntergeladen, im Cache gespeichert wurde und angezeigt werden kann.
Mit diesem Muster können Nutzende ihr Smartphone in die Tasche stecken und sich ganz auf ihr Leben konzentrieren, denn sie wissen, dass das Smartphone sie benachrichtigt, wenn sie es abrufen möchte.
Berechtigungen
In den Demos, die ich gezeigt habe, werden Webbenachrichtigungen verwendet, für die eine Berechtigung erforderlich ist. Bei der Hintergrundsynchronisierung selbst ist das nicht der Fall.
Synchronisierungsereignisse werden häufig abgeschlossen, während der Nutzer eine Seite mit der Website geöffnet hat. Daher wäre es nicht sinnvoll, die Berechtigung des Nutzers zu gewähren. 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 eine Synchronisierungsveranstaltung registrieren, wenn der Nutzer ein Fenster zur Website geöffnet hat.
- Die Ausführungszeit für das Ereignis ist begrenzt, sodass Sie sie nicht alle x Sekunden zum Pingen eines Servers, zum Mining von Bitcoins usw. verwenden können.
Natürlich können diese Einschränkungen je nach der tatsächlichen 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 Service Worker noch nicht unterstützen. Aber Progressive Enhancement ist hier 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 einfach den Inhalt. von der Seite, wie Sie es heute tun würden.
Die Hintergrundsynchronisierung ist auch dann sinnvoll, wenn der Nutzer eine gute Verbindung zu haben scheint, da Sie so beim Senden von Daten vor Navigation und Schließen von Tabs geschützt sind.
Die Zukunft
Wir möchten im ersten Halbjahr 2016 die Hintergrundsynchronisierung in einer stabilen Version von Chrome bereitstellen und arbeiten gleichzeitig an einer Variante, der sogenannten "regelmäßigen Hintergrundsynchronisierung". Mit einer regelmäßigen Hintergrundsynchronisierung können Sie ein durch das Zeitintervall, den Akku- und Netzwerkstatus beschränktes Ereignis anfordern. 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 könnte stündlich eine Synchronisierung anfordern, aber der Browser weiß möglicherweise, dass Sie die Website nur um 07:00 Uhr lesen, sodass die Synchronisierung täglich um 06:50 Uhr ausgelöst wird. Diese Idee ist etwas weiter fortgeschritten als die einmalige Synchronisierung, aber sie wird bereits umgesetzt.
Schritt für Schritt bringen wir erfolgreiche Muster von Android und iOS ins Web und behalten dabei auch die Vorteile des Web bei.