Achtergrondsynchronisatie is een nieuwe web-API waarmee u acties kunt uitstellen totdat de gebruiker een stabiele connectiviteit heeft. Dit zorgt ervoor dat wat de gebruiker wil verzenden ook daadwerkelijk wordt verzonden.
Het probleem
Het internet is een geweldige plek om tijd te verspillen. Zonder tijd te verspillen op internet zouden we niet weten dat katten niet van bloemen houden , kameleons van bubbels houden , of dat onze eigen Eric Bidelman een putt-putt-golfheld van eind jaren negentig is.
Maar soms, heel soms, willen we geen tijd verspillen. De gewenste gebruikerservaring is meer als:
- Telefoon uit zak.
- Klein doel bereiken.
- Telefoon terug in zak.
- Hervat het leven.
Helaas wordt deze ervaring vaak verbroken door slechte connectiviteit. We zijn er allemaal geweest. Je staart naar een wit scherm of een spinner, en je weet dat je het gewoon moet opgeven en door moet gaan met je leven, maar je geeft het nog eens 10 seconden voor het geval dat. Na die 10 seconden? Niets.
Maar waarom nu opgeven? Je hebt al tijd geïnvesteerd, dus met niets weglopen zou zonde zijn, dus blijf je wachten. Op dit punt wil je het opgeven, maar je weet dat de seconde dat je dat doet, de seconde is voordat alles zou zijn geladen als je maar had gewacht.
Servicemedewerkers lossen het laadgedeelte van de pagina op door u inhoud vanuit een cache te laten serveren. Maar hoe zit het als de pagina iets naar de server moet sturen?
Als de gebruiker op dit moment op 'verzenden' drukt bij een bericht, moet hij naar een spinner staren totdat deze is voltooid. Als ze proberen weg te navigeren of het tabblad te sluiten, gebruiken we onbeforeunload om een bericht weer te geven als: "Nee, ik wil dat je nog wat meer naar deze spinner staart. Sorry". Als de gebruiker geen verbinding heeft, zeggen we tegen de gebruiker: "Sorry, u moet later terugkomen en het opnieuw proberen".
Dit is onzin. Met synchronisatie op de achtergrond kunt u het beter doen.
De oplossing
De volgende video toont Emojoy , een chatdemo met alleen emoji. Het is een progressieve web-app en werkt eerst offline. De app maakt gebruik van pushberichten en meldingen en maakt gebruik van achtergrondsynchronisatie.
Als de gebruiker een bericht probeert te verzenden terwijl er geen verbinding is, wordt het bericht gelukkig op de achtergrond verzonden zodra er verbinding is.
Vanaf maart 2016 is achtergrondsynchronisatie beschikbaar in Chrome vanaf versie 49 en hoger. Je kunt het in actie zien door de onderstaande stappen te volgen:
- Open Emjoy .
- Ga offline (via de vliegtuigmodus of bezoek uw plaatselijke kooi van Faraday).
- Typ een bericht.
- Ga terug naar uw startscherm (sluit optioneel het tabblad of de browser).
- Ga online.
- Bericht wordt op de achtergrond verzonden!
Het op deze manier kunnen insturen op de achtergrond levert ook een waargenomen prestatieverbetering op. De app hoeft zich niet zo veel zorgen te maken over het verzenden van het bericht, dus hij kan het bericht meteen aan de uitvoer toevoegen.
Een achtergrondsynchronisatie aanvragen
In echte uitbreidbare webstijl is dit een functie op een laag niveau die u de vrijheid geeft om te doen wat u nodig heeft. U vraagt om het activeren van een gebeurtenis wanneer de gebruiker connectiviteit heeft, wat onmiddellijk gebeurt als de gebruiker al connectiviteit heeft. Vervolgens luister je naar die gebeurtenis en doe je wat je moet doen.
Net als pushberichten gebruikt het een servicemedewerker als gebeurtenisdoel, waardoor het kan werken wanneer de pagina niet geopend is. Registreer u om te beginnen 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 het! In het bovenstaande zou doSomeStuff() een belofte moeten retourneren die het succes/mislukking aangeeft van wat het ook probeert te doen. Als hieraan wordt voldaan, is de synchronisatie voltooid. Als dit mislukt, wordt een nieuwe synchronisatie gepland om opnieuw te proberen. Bij nieuwe synchronisaties wordt ook gewacht op connectiviteit, en wordt er gebruik gemaakt van een exponentiële back-off.
De tagnaam van de synchronisatie ('myFirstSync' in het bovenstaande voorbeeld) moet uniek zijn voor een bepaalde synchronisatie. Als u zich registreert voor een synchronisatie met dezelfde tag als een synchronisatie die in behandeling is, wordt deze samengevoegd met de bestaande synchronisatie. Dat betekent dat u zich kunt registreren voor een 'clear-outbox'-synchronisatie elke keer dat de gebruiker een bericht verzendt, maar als hij vijf berichten offline verzendt, krijgt u slechts één synchronisatie wanneer hij online komt. Als je vijf afzonderlijke synchronisatiegebeurtenissen wilt, gebruik dan gewoon unieke tags!
Hier is een eenvoudige demo die het absolute minimum doet; het gebruikt de synchronisatiegebeurtenis om een melding weer te geven.
Waar kan ik achtergrondsynchronisatie voor gebruiken?
Idealiter zou u het gebruiken om de verzending van gegevens die u belangrijk vindt, te plannen buiten de levensduur van de pagina. Chatberichten, e-mails, documentupdates, instellingenwijzigingen, foto-uploads... alles wat u op de server wilt bereiken, zelfs als de gebruiker weg navigeert of het tabblad sluit. De pagina zou deze kunnen opslaan in een "outbox" -archief in indexedDB, en de servicemedewerker zou ze kunnen ophalen en verzenden.
Hoewel je het ook kunt gebruiken om kleine stukjes gegevens op te halen...
Nog een demo!
Dit is de offline wikipedia- demo die ik heb gemaakt voor Superchargen Page Load . Sindsdien heb ik er wat magie voor achtergrondsynchronisatie aan toegevoegd.
Probeer dit zelf eens uit. Zorg ervoor dat u Chrome 49 en hoger gebruikt en doe dan het volgende:
- Ga naar een willekeurig artikel, bijvoorbeeld Chrome .
- Ga offline (gebruik de vliegtuigmodus of sluit je aan bij een vreselijke mobiele provider zoals ik).
- Klik op een link naar een ander artikel.
- U zou een melding moeten krijgen dat de pagina niet kon worden geladen (dit verschijnt ook als het even duurt voordat de pagina is geladen).
- Ga akkoord met meldingen.
- Sluit de browser.
- Ga online
- U ontvangt een melding wanneer het artikel is gedownload, in de cache is opgeslagen en klaar is om te bekijken!
Met behulp van dit patroon kan de gebruiker zijn telefoon in zijn zak stoppen en verder gaan met zijn leven, wetende dat de telefoon hem zal waarschuwen wanneer hij wordt opgehaald zoals hij dat wil.
Machtigingen
De demo's die ik heb getoond, gebruiken webmeldingen , waarvoor toestemming vereist is, maar synchronisatie op de achtergrond zelf niet.
Synchronisatiegebeurtenissen worden vaak voltooid terwijl de gebruiker een pagina op de site heeft geopend, dus het vereisen van toestemming van de gebruiker zou een slechte ervaring zijn. In plaats daarvan beperken we wanneer synchronisaties kunnen worden geregistreerd en geactiveerd om misbruik te voorkomen. Bijvoorbeeld:
- U kunt zich alleen registreren voor een synchronisatiegebeurtenis als de gebruiker een venster naar de site heeft geopend.
- De uitvoeringstijd 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 strenger worden op basis van gebruik in de echte wereld.
Progressieve verbetering
Het zal nog een tijdje duren voordat alle browsers achtergrondsynchronisatie ondersteunen, vooral omdat Safari en Edge nog geen servicewerknemers ondersteunen. Maar progressieve verbetering helpt 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();
}
Als servicemedewerkers of achtergrondsynchronisatie niet beschikbaar zijn, plaatst u gewoon de inhoud van de pagina zoals u dat vandaag zou doen.
Het is de moeite waard om achtergrondsynchronisatie te gebruiken, zelfs als de gebruiker een goede connectiviteit lijkt te hebben, omdat het u beschermt tegen navigatie en het sluiten van tabbladen tijdens het verzenden van gegevens.
De toekomst
We streven ernaar om achtergrondsynchronisatie naar een stabiele versie van Chrome te leveren in de eerste helft van 2016, terwijl we werken aan een variant, 'periodieke achtergrondsynchronisatie'. Met periodieke achtergrondsynchronisatie kunt u een gebeurtenis aanvragen die beperkt is op basis van tijdsinterval, batterijstatus en netwerkstatus. Hiervoor is uiteraard toestemming van de gebruiker vereist, en het zal ook aan de browser zijn om te bepalen wanneer en hoe vaak deze gebeurtenissen worden geactiveerd. Met andere woorden: een nieuwssite kan elk uur vragen om te synchroniseren, maar de browser weet mogelijk dat u die site pas om 07:00 uur leest, zodat de synchronisatie dagelijks om 06:50 uur wordt geactiveerd. Dit idee is iets verder weg dan eenmalige synchronisatie, maar het komt eraan.
Beetje bij beetje brengen we succesvolle patronen van Android en iOS naar het internet, terwijl we nog steeds behouden wat het internet geweldig maakt!