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(doSomeStuff());
  }
});

En dat is alles! doSomeStuff() moet een promise retourneren die aangeeft of de actie is geslaagd of mislukt. Als de promise wordt vervuld, is de synchronisatie voltooid. Als deze mislukt, wordt een nieuwe synchronisatie gepland om het opnieuw te proberen. Bij een nieuwe synchronisatie wordt ook gewacht op verbinding en wordt een exponentiële back-off toegepast.

De tagnaam van de synchronisatie ('myFirstSync' in het voorbeeld) moet uniek zijn voor een bepaalde synchronisatie. Als u een synchronisatie registreert met dezelfde tag als een lopende synchronisatie, wordt deze samengevoegd met de bestaande synchronisatie. Dat betekent dat u een synchronisatie kunt registreren om de uitgaande berichten te wissen telkens wanneer de gebruiker een bericht verzendt, maar als die gebruiker 5 berichten verzendt terwijl hij offline is, ontvangt u slechts één synchronisatie wanneer hij weer online is. Gebruik unieke tags om 5 afzonderlijke synchronisatiegebeurtenissen te ontvangen.

Hier is een demo die de synchronisatiegebeurtenis gebruikt om een ​​melding weer te geven.

Toepassingen voor achtergrondsynchronisatie

Idealiter zou je het gebruiken om het verzenden van alle gegevens die je belangrijk vindt, ook na het einde van de pagina, in te plannen. Denk aan chatberichten, e-mails, documentupdates, instellingenwijzigingen, foto-uploads of alle andere content die je naar de server wilt sturen, zelfs als de gebruiker de pagina verlaat of het tabblad sluit. De pagina zou deze gegevens kunnen opslaan in een "outbox" in IndexedDB, waarna de service worker ze zou ophalen en verzenden.

Je kunt het echter ook gebruiken om kleine stukjes data op te halen.

Offline Wikipedia-demo

Dit is de offline Wikipedia- demo die ik heb gemaakt voor Supercharging Page Load . Ik heb er sindsdien wat achtergrondsynchronisatie aan toegevoegd.

Probeer dit zelf eens uit:

1. Houd dit tabblad open in uw browser.
2. Ga offline met de vliegtuigmodus of door wifi uit te schakelen.
3. Klik op een link naar een ander artikel.
4. Je zou een melding moeten krijgen dat de pagina niet geladen kon worden (dit verschijnt ook als het laden van de pagina gewoon even duurt).
5. Akkoord met het ontvangen van meldingen.
6. Sluit de browser.
7. Ga online
8. Je ontvangt een melding wanneer het artikel is gedownload, in de cache is opgeslagen en klaar is om te bekijken!

Met dit patroon kan de gebruiker zijn telefoon in zijn zak stoppen en verdergaan met zijn dagelijkse bezigheden, wetende dat de telefoon een melding geeft wanneer het gewenste resultaat is bereikt.

Toestemmingen

De demo's die ik heb laten zien, maken gebruik van webnotificaties , waarvoor toestemming nodig is, maar achtergrondsynchronisatie zelf niet.

Synchronisatieprocessen worden vaak voltooid terwijl de gebruiker een pagina van de website open heeft staan. Het vereisen van gebruikerstoestemming zou daarom een ​​slechte gebruikerservaring opleveren. Om misbruik te voorkomen, beperken we daarom de momenten waarop synchronisaties kunnen worden geregistreerd en geactiveerd. Bijvoorbeeld:

• Je kunt je alleen aanmelden voor een synchronisatiegebeurtenis als de gebruiker een venster met de website open heeft.
• De uitvoeringsduur van de gebeurtenis is beperkt, dus je kunt ze niet gebruiken om elke x seconden een server te pingen, bitcoins te minen of wat dan ook.

Uiteraard kunnen deze beperkingen versoepelen of aanscherpen, afhankelijk van het daadwerkelijke gebruik.

Progressieve verbetering

In afwachting van de standaardimplementatie van achtergrondsynchronisatie kunt u deze functie alvast geleidelijk aan verbeteren:

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();
}

Als service workers of achtergrondsynchronisatie niet beschikbaar zijn, kunt u de inhoud van de pagina gewoon plaatsen zoals u dat nu ook doet.

Het is de moeite waard om achtergrondsynchronisatie te gebruiken, zelfs als de gebruiker een goede internetverbinding lijkt te hebben, omdat dit je beschermt tegen navigatie en het sluiten van tabbladen tijdens het verzenden van gegevens.

De toekomst

We streven ernaar om achtergrondsynchronisatie in de eerste helft van 2016 in een stabiele versie van Chrome uit te brengen, terwijl we werken aan een variant, "periodieke achtergrondsynchronisatie". Met periodieke achtergrondsynchronisatie kunt u een gebeurtenis aanvragen die is beperkt door een tijdsinterval, batterijstatus en netwerkstatus. Dit vereist uiteraard toestemming van de gebruiker, en het is ook aan de browser om te bepalen wanneer en hoe vaak deze gebeurtenissen plaatsvinden. Met andere woorden, een nieuwssite zou elk uur een synchronisatieverzoek kunnen indienen, maar de browser weet misschien dat u die site alleen om 07:00 uur leest, dus de synchronisatie zou dagelijks om 06:50 uur plaatsvinden. Dit idee is nog iets verder weg dan eenmalige synchronisatie, maar het komt eraan.

Stap voor stap brengen we succesvolle patronen van Android en iOS naar het web, terwijl we tegelijkertijd behouden wat het web zo geweldig maakt!