Synchroniseer de gegevens van je web-app op de achtergrond voor een meer app-achtige functionaliteit
Heb je ooit in een van de volgende situaties gezeten?
- Je reist met de trein of metro en hebt een slechte of geen verbinding.
- Je bent beperkt door je provider nadat je te veel video's hebt bekeken
- Je woont in een land waar de bandbreedte de vraag nauwelijks kan bijbenen.
Als dat het geval is, heeft u vast wel eens gefrustreerd bepaalde dingen op het web willen doen en zich afgevraagd waarom platformspecifieke apps het in deze scenario's zo vaak beter doen. Platformspecifieke apps kunnen van tevoren nieuwe content ophalen, zoals nieuwsartikelen of weersinformatie. Zelfs als er geen netwerk is in de metro, kun je nog steeds het nieuws lezen.
Met periodieke synchronisatie op de achtergrond kunnen web-apps periodiek gegevens op de achtergrond synchroniseren, waardoor web-apps meer lijken op het gedrag van een platformspecifieke app.
Proberen
DevTools Tips is een PWA die de Periodic Background Sync API gebruikt. De PWA DevTools Tips haalt dagelijks nieuwe tips voor ontwikkelaarstools op en slaat deze op in het cachegeheugen, zodat gebruikers er toegang toe hebben als ze de app de volgende keer openen, of ze nu online zijn of niet. Installeer de app om de Periodic Background Sync API beschikbaar te maken.
Ga naar de broncode op GitHub. De app registreert de periodieke synchronisatie met name in de functie registerPeriodicSync(). De service worker-code is waar de app naar de periodicsync-gebeurtenis luistert.
Concepten en gebruik
Met periodieke achtergrondsynchronisatie kun je nieuwe content tonen als een progressieve web-app of een pagina die wordt ondersteund door een servicemedewerker wordt gestart. Dit doet de app door gegevens op de achtergrond te downloaden als de app of pagina niet wordt gebruikt. Zo voorkom je dat de content van de app na de lancering wordt vernieuwd terwijl deze wordt bekeken. Sterker nog, het voorkomt dat de app een content-spinner toont voordat deze wordt vernieuwd.
Zonder periodieke synchronisatie op de achtergrond moeten web-apps alternatieve methoden gebruiken om gegevens te downloaden. Een veelvoorkomend voorbeeld is het gebruik van een pushmelding om een servicemedewerker te activeren. De gebruiker wordt onderbroken door een bericht zoals 'nieuwe gegevens beschikbaar'. Het updaten van de gegevens is in feite een neveneffect. Je kunt nog steeds pushmeldingen gebruiken voor echt belangrijke updates, zoals belangrijk nieuws.
Periodieke synchronisatie op de achtergrond kan worden verward met synchronisatie op de achtergrond. Hoewel ze vergelijkbare namen hebben, zijn de use cases anders. Achtergrondsynchronisatie wordt onder andere veelgebruikt om gegevens opnieuw naar een server te sturen als een eerder verzoek is mislukt.
Gebruikersengagement goed krijgen
Als periodieke synchronisatie op de achtergrond niet goed wordt uitgevoerd, kan dit de bronnen van gebruikers verspillen. Chrome heeft de functie vóór de release getest om er zeker van te zijn dat deze goed werkte. In dit gedeelte leggen we een aantal ontwerpbeslissingen uit die Chrome heeft genomen om deze functie zo nuttig mogelijk te maken.
De eerste ontwerpbeslissing van Chrome is dat een web-app alleen periodieke achtergrondsynchronisatie kan gebruiken nadat iemand de app op het apparaat heeft geïnstalleerd en als afzonderlijke app heeft gestart. Periodieke synchronisatie op de achtergrond is niet beschikbaar in de context van een gewoon tabblad in Chrome.
Chrome wil niet dat ongebruikte of zelden gebruikte web-apps onnodig batterij of data verbruiken. Daarom heeft Chrome periodieke synchronisatie op de achtergrond ontworpen, zodat ontwikkelaars deze moeten verdienen door waarde te bieden aan hun gebruikers. Chrome gebruikt een site-betrokkenheidsscore (about://site-engagement/) om te bepalen of en hoe vaak periodieke synchronisaties op de achtergrond kunnen plaatsvinden voor een bepaalde web-app. Met andere woorden: een periodicsync-event wordt helemaal niet geactiveerd, tenzij de betrokkenheidsscore groter is dan 0. De waarde van de score heeft invloed op de frequentie waarmee het periodicsync-event wordt geactiveerd. Zo weet je zeker dat alleen de apps die je actief gebruikt op de achtergrond worden gesynchroniseerd.
Periodieke achtergrondsynchronisatie heeft enkele overeenkomsten met bestaande API's en best practices op populaire platforms. Eenmalige synchronisatie op de achtergrond en pushmeldingen zorgen er bijvoorbeeld voor dat de logica van een web-app iets langer actief blijft (via de service worker) nadat iemand de pagina heeft gesloten. Op de meeste platforms hebben mensen vaak apps geïnstalleerd die periodiek op de achtergrond toegang hebben tot het netwerk om een betere gebruikerservaring te bieden voor acties zoals kritieke updates, content vooraf ophalen en gegevens synchroniseren. Periodieke synchronisatie op de achtergrond verlengt ook de levensduur van de logica van een web-app, zodat deze met regelmatige tussenpozen kan worden uitgevoerd, wat een paar minuten per keer kan duren.
Als de browser dit vaak en zonder beperkingen zou toestaan, zou dit tot privacyproblemen kunnen leiden. Zo heeft Chrome dit risico voor periodieke synchronisatie op de achtergrond aangepakt:
- De achtergrondsynchronisatie vindt alleen plaats in een netwerk waarmee het apparaat eerder verbinding heeft gemaakt. Chrome raadt je aan alleen verbinding te maken met netwerken die worden beheerd door betrouwbare partijen.
- Net als bij alle internetcommunicatie onthult periodieke synchronisatie op de achtergrond de IP-adressen van de client, de server waarmee deze communiceert en de naam van de server. De browser beperkt de frequentie van de achtergrondsynchronisaties van een app om deze af te stemmen op hoe vaak de persoon die app gebruikt. Zo wordt de blootstelling beperkt tot ongeveer wat deze zou zijn als de app alleen synchroniseert als deze op de voorgrond staat. Als de persoon niet meer vaak interactie heeft met de app, worden periodieke achtergrondsynchronisaties niet meer geactiveerd. Dit is een netto verbetering ten opzichte van de status quo in platformspecifieke apps.
Wanneer kan het worden gebruikt?
De gebruiksregels verschillen per browser. Samenvattend stelt Chrome de volgende vereisten voor periodieke synchronisatie op de achtergrond:
- Een bepaalde score voor gebruikersengagement.
- De aanwezigheid van een eerder gebruikt netwerk.
Ontwikkelaars bepalen niet wanneer synchronisaties plaatsvinden. De synchronisatiefrequentie is afgestemd op hoe vaak de app wordt gebruikt. (Platformspecifieke apps doen dit niet.) Er wordt ook rekening gehouden met de aan/uit-status en de verbindingsstatus van het apparaat.
Wanneer moet het worden gebruikt?
Als je servicemedewerker wordt geactiveerd om een periodicsync-gebeurtenis af te handelen, heb je de mogelijkheid om gegevens op te vragen, maar niet de verplichting om dit te doen. Houd bij de afhandeling van de gebeurtenis rekening met de netwerkomstandigheden en de beschikbare opslag en download verschillende hoeveelheden gegevens als reactie. Gebruik de volgende bronnen voor hulp:
Rechten
Nadat de service worker is geïnstalleerd, gebruikt u de Permissions API om periodic-background-sync op te vragen. Je kunt dit doen vanuit een venster of een context van een service worker.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Een periodieke synchronisatie registreren
Zoals al gezegd, is voor periodieke synchronisatie op de achtergrond een service worker vereist. Een PeriodicSyncManager ophalen met ServiceWorkerRegistration.periodicSync en register() bellen. Voor registratie zijn zowel een tag als een minimale synchronisatie-interval (minInterval) vereist. De tag identificeert de geregistreerde synchronisatie, zodat meerdere synchronisaties kunnen worden geregistreerd. In het volgende voorbeeld is de tagnaam 'content-sync' en is de minInterval 1 dag.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Een registratie laten verifiëren
Roep periodicSync.getTags() aan om een matrix met registratietags op te halen. In het volgende voorbeeld worden tag-namen gebruikt om te bevestigen dat de cache-update actief is, zodat deze niet opnieuw wordt geüpdatet.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Je kunt getTags() ook gebruiken om een lijst met actieve registraties te tonen op de instellingenpagina van je web-app, zodat gebruikers specifieke typen updates kunnen aan- of uitzetten.
Reageren op een periodieke synchronisatie op de achtergrond
Als je wilt reageren op een periodieke synchronisatie op de achtergrond, voeg je een periodicsync-gebeurtenisafhandeling toe aan je servicemedewerker. Het event-object dat aan de functie wordt doorgegeven, bevat een tag-parameter die overeenkomt met de waarde die tijdens de registratie is gebruikt. Als er bijvoorbeeld een periodieke achtergrondsynchronisatie is geregistreerd met de naam 'content-sync', is event.tag 'content-sync'.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
De registratie van een synchronisatie ongedaan maken
Als je een geregistreerde synchronisatie wilt beëindigen, roep je periodicSync.unregister() aan met de naam van de synchronisatie die je wilt afmelden.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Interfaces
Hier volgt een kort overzicht van de interfaces die de Periodic Background Sync API biedt.
PeriodicSyncEvent. Wordt op een door de browser gekozen tijdstip doorgegeven aan de gebeurtenis-handlerServiceWorkerGlobalScope.onperiodicsync.PeriodicSyncManager. Registreert en deregistreert periodieke synchronisaties en biedt tags voor geregistreerde synchronisaties. Haal een instantie van deze klasse op uit de property ServiceWorkerRegistration.periodicSync.ServiceWorkerGlobalScope.onperiodicsync. Registreert een handler om dePeriodicSyncEventte ontvangen.ServiceWorkerRegistration.periodicSync. Retourneert een verwijzing naar dePeriodicSyncManager.
Voorbeeld
In de volgende gedeelten staan enkele voorbeelden van het gebruik van de Periodic Background Sync API.
Inhoud bijwerken
In het volgende voorbeeld wordt periodieke synchronisatie op de achtergrond gebruikt om up-to-date artikelen voor een nieuwssite of blog te downloaden en in het cachegeheugen op te slaan. Let op de tagnaam, die aangeeft wat voor soort synchronisatie dit is ('update-articles'). De aanroep naar updateArticles() is verpakt in event.waitUntil(), zodat de service worker niet wordt beëindigd voordat de artikelen zijn gedownload en opgeslagen.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Periodieke synchronisatie op de achtergrond toevoegen aan een bestaande web-app
Deze reeks wijzigingen was nodig om periodieke synchronisatie op de achtergrond toe te voegen aan een bestaande PWA. Dit voorbeeld bevat een aantal nuttige logboekregistratie-instructies die de status van periodieke synchronisatie op de achtergrond in de web-app beschrijven.
Fouten in de Periodic Background Sync API opsporen
Het kan een uitdaging zijn om een end-to-end weergave van periodieke synchronisatie op de achtergrond te krijgen als je lokaal test. Informatie over actieve registraties, geschatte synchronisatie-intervallen en logboeken van eerdere synchronisatiegebeurtenissen bieden waardevolle context bij het debuggen van het gedrag van je web-app. Gelukkig kun je al die informatie vinden via een experimentele functie in Chrome DevTools.
Lokale activiteit registreren
Het gedeelte Periodieke synchronisatie op de achtergrond van DevTools is geordend rond belangrijke gebeurtenissen in de levenscyclus van periodieke synchronisatie op de achtergrond: registreren voor synchronisatie, een synchronisatie op de achtergrond uitvoeren en de registratie ongedaan maken. Klik op Opname starten om informatie over deze gebeurtenissen te krijgen.
Tijdens de opname verschijnen er in DevTools vermeldingen die overeenkomen met gebeurtenissen, met context en metadata die voor elke gebeurtenis zijn geregistreerd.
Nadat je opnemen hebt aangezet, blijft dit tot 3 dagen aanstaan. Zo kan DevTools lokale foutopsporingsinformatie vastleggen over synchronisaties op de achtergrond die kunnen plaatsvinden, zelfs uren later.
Gebeurtenissen simuleren
Hoewel het handig kan zijn om achtergrondactiviteit op te nemen, zijn er momenten waarop je je periodicsync-handler onmiddellijk wilt testen zonder te wachten tot een gebeurtenis op de normale cadans wordt geactiveerd.
U kunt dit doen in het gedeelte Service Workers in het deelvenster Application (Toepassing) in Chrome DevTools. In het veld Periodieke synchronisatie kunt u een tag voor de gebeurtenis invoeren en deze zo vaak activeren als u wilt.
Gebruik van de DevTools-interface
Je ziet het gedeelte Periodieke achtergrondsynchronisatie in het deelvenster Applicatie van DevTools.
