Maak kennis met achtergrondsynchronisatie

Jake Archibald

Gepubliceerd: 8 december 2015

Achtergrondsynchronisatie is een web-API waarmee je acties kunt uitstellen totdat de gebruiker een stabiele internetverbinding heeft. Dit helpt je gebruikers om bestanden te verzenden zodra dat mogelijk is.

Het probleem

Het internet is een geweldige plek om tijd te verdoen. Zonder tijd te verspillen op het internet zouden we niet weten dat katten een hekel hebben aan bloemen , dat kameleons dol zijn op bubbels , of dat Eric Bidelman een minigolfheld was in de late jaren 90 .

Maar soms, heel soms, willen we geen tijd verspillen. De ideale gebruikerservaring ziet er dan meer zo uit:

1. Telefoon uit de zak.
2. Bereik een klein doel.
3. Telefoon terug in zak.
4. Pak je leven weer op.

Helaas wordt deze ervaring vaak verstoord door een slechte internetverbinding. We kennen het allemaal. Je staart naar een wit scherm of een draaiend icoontje en je weet dat je het eigenlijk gewoon moet opgeven en verder moet gaan met je leven, maar je geeft het voor de zekerheid nog 10 seconden. En na die 10 seconden? Niets.

Maar waarom nu opgeven? Je hebt er al tijd in geïnvesteerd, dus weggaan zonder resultaat zou zonde zijn. Daarom blijf je wachten. Op dit punt wil je het opgeven, maar je weet dat het moment dat je dat doet, het moment is waarop alles geladen zou zijn als je maar had gewacht.

Service workers lossen het laadproces van pagina's op door content vanuit een cache te serveren. Maar wat gebeurt er als de pagina iets naar de server moet sturen?

Momenteel moet de gebruiker, na het verzenden van een bericht via 'verzenden', wachten tot het laden is voltooid door naar een laadindicator te kijken. Als de gebruiker probeert weg te navigeren of het tabblad te sluiten, gebruiken we onbeforeunload om een ​​bericht weer te geven zoals: "Nee, ik wil dat u nog even naar deze laadindicator blijft kijken. Sorry." Als de gebruiker geen internetverbinding heeft, geven we de melding: "Sorry, u moet later terugkomen en het opnieuw proberen."

Achtergrondsynchronisatie zorgt voor betere prestaties.

De oplossing

De volgende video toont Emojoy , een demo van een chat-app die uitsluitend emoji's gebruikt. Het is een progressieve web-app die primair offline werkt. De app maakt gebruik van pushberichten en notificaties en synchroniseert op de achtergrond.

Als de gebruiker een bericht probeert te verzenden terwijl er geen internetverbinding is, wordt het bericht gelukkig op de achtergrond verzonden zodra er wel verbinding is.

Doordat het versturen op de achtergrond op deze manier ook merkbaar beter presteert. De app hoeft niet meer zo'n ophef te maken over het verzenden van het bericht, waardoor het bericht direct aan de uitvoer kan worden toegevoegd.

Achtergrondsynchronisatie is beschikbaar vanaf Chrome 49.

Hoe een achtergrondsynchronisatie aanvragen

In ware, uitbreidbare webstijl is dit een laag-niveau functionaliteit die je de vrijheid geeft om te doen wat je nodig hebt. Je vraagt ​​om een ​​gebeurtenis te activeren wanneer de gebruiker verbinding heeft, wat direct gebeurt als de gebruiker al verbinding heeft. Vervolgens luister je naar die gebeurtenis en doe je wat je moet doen.

Net als pushberichten maakt het gebruik van een service worker als doelwit voor de gebeurtenis, waardoor het werkt wanneer de pagina niet open is. Om te beginnen, registreer je je voor een synchronisatie vanaf een pagina:

// 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(