Rijkere offline ervaringen met de Periodic Background Sync API

Synchroniseer de gegevens van uw webapp op de achtergrond voor een meer app-achtige ervaring

Jeff Posnick

Joe Medley

Bent u ooit in een van de volgende situaties geweest?

• Rijden in een trein of metro met slechte of geen connectiviteit
• U bent gesmoord door uw provider nadat u te veel video's heeft bekeken
• Leven in een land waar bandbreedte moeite heeft om aan de vraag te voldoen

Als dat zo is, dan heb je vast wel eens de frustratie gevoeld om bepaalde dingen op internet gedaan te krijgen, en heb je je afgevraagd waarom platformspecifieke apps het zo vaak beter doen in deze scenario's. Platformspecifieke apps kunnen van tevoren nieuwe inhoud, zoals nieuwsartikelen of weersinformatie, ophalen. Zelfs als er geen netwerk in de metro is, kun je nog steeds het nieuws lezen.

Met periodieke achtergrondsynchronisatie kunnen webapplicaties periodiek gegevens op de achtergrond synchroniseren, waardoor webapps dichter bij het gedrag van een platformspecifieke app komen.

Probeer het

U kunt periodieke achtergrondsynchronisatie proberen met de live demo-app . Voordat u het gebruikt, moet u ervoor zorgen dat:

• U gebruikt Chrome 80 of hoger.
• U installeert de webapp voordat u periodieke achtergrondsynchronisatie inschakelt.

Concepten en gebruik

Met periodieke synchronisatie op de achtergrond kunt u nieuwe inhoud weergeven wanneer een progressieve web-app of door servicemedewerkers ondersteunde pagina wordt gestart. Dit gebeurt door gegevens op de achtergrond te downloaden wanneer de app of pagina niet wordt gebruikt. Dit voorkomt dat de inhoud van de app na het starten wordt vernieuwd terwijl deze wordt bekeken. Beter nog: het voorkomt dat de app een inhoudspinner weergeeft voordat deze wordt vernieuwd.

Zonder periodieke achtergrondsynchronisatie moeten webapps alternatieve methoden gebruiken om gegevens te downloaden. Een veelvoorkomend voorbeeld is het gebruik van een pushmelding om een ​​servicemedewerker te wekken. De gebruiker wordt onderbroken door een melding zoals 'nieuwe data beschikbaar'. Het bijwerken van de gegevens is in wezen een neveneffect. Je hebt nog steeds de mogelijkheid om pushmeldingen te gebruiken voor echt belangrijke updates, zoals belangrijk laatste nieuws.

Periodieke achtergrondsynchronisatie wordt gemakkelijk verward met achtergrondsynchronisatie. Hoewel ze vergelijkbare namen hebben, zijn hun gebruiksscenario's verschillend. Achtergrondsynchronisatie wordt onder andere het meest gebruikt voor het opnieuw verzenden van gegevens naar een server wanneer een eerder verzoek is mislukt.

Zorg voor een goede gebruikersbetrokkenheid

Als het verkeerd wordt uitgevoerd, kan periodieke synchronisatie op de achtergrond een verspilling van de bronnen van gebruikers betekenen. Voordat Chrome het uitbracht, heeft Chrome het een proefperiode doorlopen om er zeker van te zijn dat het goed was. In dit gedeelte worden enkele ontwerpbeslissingen uitgelegd die Chrome heeft genomen om deze functie zo nuttig mogelijk te maken.

De eerste ontwerpbeslissing die Chrome heeft genomen, is dat een webapp alleen periodieke achtergrondsynchronisatie kan gebruiken nadat iemand deze op zijn apparaat heeft geïnstalleerd en deze als een afzonderlijke applicatie heeft gestart. Periodieke achtergrondsynchronisatie is niet beschikbaar in de context van een normaal tabblad in Chrome.

Omdat Chrome bovendien niet wil dat ongebruikte of zelden gebruikte webapps onnodig batterij of data verbruiken, heeft Chrome periodieke achtergrondsynchronisatie zo ontworpen dat ontwikkelaars deze moeten verdienen door waarde aan hun gebruikers te bieden. Concreet gebruikt Chrome een sitebetrokkenheidsscore ( about://site-engagement/ ) om te bepalen of en hoe vaak periodieke achtergrondsynchronisaties kunnen plaatsvinden voor een bepaalde webapp. Met andere woorden: een periodicsync gebeurtenis wordt helemaal niet geactiveerd, tenzij de betrokkenheidsscore groter is dan nul, en de waarde ervan invloed heeft op de frequentie waarmee de periodicsync gebeurtenis wordt geactiveerd. Dit zorgt ervoor dat de enige apps die op de achtergrond worden gesynchroniseerd, de apps zijn die u actief gebruikt.

Periodieke achtergrondsynchronisatie vertoont enkele overeenkomsten met bestaande API's en praktijken op populaire platforms. Dankzij eenmalige achtergrondsynchronisatie en pushmeldingen kan de logica van een webapp bijvoorbeeld iets langer blijven bestaan ​​(via de servicemedewerker) nadat iemand de pagina heeft gesloten. Op de meeste platforms is het gebruikelijk dat mensen apps hebben geïnstalleerd die periodiek op de achtergrond toegang hebben tot het netwerk om een ​​betere gebruikerservaring te bieden voor essentiële updates, het vooraf ophalen van inhoud, het synchroniseren van gegevens, enzovoort. Op dezelfde manier verlengt periodieke achtergrondsynchronisatie ook de levensduur van de logica van een web-app, zodat deze op regelmatige tijdstippen kan worden uitgevoerd, gedurende enkele minuten per keer.

Als de browser toestaat dat dit regelmatig en zonder beperkingen gebeurt, kan dit tot privacyproblemen leiden. Hier leest u hoe Chrome dit risico voor periodieke synchronisatie op de achtergrond heeft aangepakt:

• De achtergrondsynchronisatieactiviteit vindt alleen plaats op een netwerk waarmee het apparaat eerder is verbonden. Chrome raadt aan om alleen verbinding te maken met netwerken die worden beheerd door betrouwbare partijen.
• Zoals bij alle internetcommunicatie onthult periodieke achtergrondsynchronisatie de IP-adressen van de client, de server waarmee deze communiceert en de naam van de server. Om deze blootstelling te beperken tot ongeveer wat het zou zijn als de app alleen synchroniseerde wanneer deze zich op de voorgrond bevond, beperkt de browser de frequentie van de achtergrondsynchronisaties van een app zodat deze overeenkomt met hoe vaak de persoon die app gebruikt. Als de persoon niet meer regelmatig met de app communiceert, stopt de periodieke synchronisatie op de achtergrond. Dit is een netto verbetering ten opzichte van de status quo in platformspecifieke apps.

Wanneer kan het worden gebruikt?

Regels voor gebruik verschillen per browser. Om het hierboven samen te vatten: Chrome stelt de volgende eisen aan periodieke achtergrondsynchronisatie:

• Een bepaalde gebruikersbetrokkenheidsscore.
• Aanwezigheid van een eerder gebruikt netwerk.

De timing van synchronisaties wordt niet beheerd door ontwikkelaars. De synchronisatiefrequentie komt overeen met hoe vaak de app wordt gebruikt. (Houd er rekening mee dat platformspecifieke apps dit momenteel niet doen.) Het houdt ook rekening met de stroom- en connectiviteitsstatus van het apparaat.

Wanneer moet het worden gebruikt?

Wanneer uw servicemedewerker wakker wordt om een periodicsync gebeurtenis af te handelen, heeft u de mogelijkheid om gegevens op te vragen, maar niet de verplichting daartoe. Bij het afhandelen van de gebeurtenis moet u rekening houden met de netwerkomstandigheden en de beschikbare opslag en als reactie hierop verschillende hoeveelheden gegevens downloaden. U kunt de volgende bronnen gebruiken om u te helpen:

• Netwerkinformatie-API
• Gegevensbesparingsmodus detecteren
• Beschikbare opslag schatten

Rechten

Nadat de servicemedewerker is geïnstalleerd, gebruikt u de Permissions API om een ​​query uit te voeren op periodic-background-sync . U kunt dit doen vanuit een venster of vanuit de context van een servicemedewerker.

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 reeds vermeld, vereist periodieke achtergrondsynchronisatie een servicemedewerker. Haal een PeriodicSyncManager op met behulp van ServiceWorkerRegistration.periodicSync en roep register() erop aan. Voor registratie zijn zowel een tag als een minimaal synchronisatie-interval ( minInterval ) vereist. De tag identificeert de geregistreerde synchronisatie, zodat meerdere synchronisaties kunnen worden geregistreerd. In het onderstaande voorbeeld is de tagnaam 'content-sync' en is het minInterval één 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 verifiëren

Roep periodicSync.getTags() aan om een ​​reeks registratietags op te halen. In het onderstaande voorbeeld worden tagnamen gebruikt om te bevestigen dat het bijwerken van de cache actief is, om te voorkomen dat er opnieuw wordt bijgewerkt.

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

U kunt getTags() ook gebruiken om een ​​lijst met actieve registraties weer te geven op de instellingenpagina van uw webapp, zodat gebruikers specifieke typen updates kunnen in- of uitschakelen.

Reageren op een periodieke achtergrondsynchronisatiegebeurtenis

Als u wilt reageren op een periodieke synchronisatiegebeurtenis op de achtergrond, voegt u een periodicsync gebeurtenishandler toe aan uw servicemedewerker. Het event dat eraan wordt doorgegeven, bevat een tag die overeenkomt met de waarde die tijdens de registratie is gebruikt. Als er bijvoorbeeld een periodieke achtergrondsynchronisatie is geregistreerd met de naam 'content-sync' , dan zal event.tag 'content-sync' zijn.

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

Om een ​​geregistreerde synchronisatie te beëindigen, roept u periodicSync.unregister() aan met de naam van de synchronisatie waarvan u de registratie ongedaan wilt maken.

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 worden geboden door de Periodic Background Sync API.

• PeriodicSyncEvent . Doorgegeven aan de gebeurtenishandler ServiceWorkerGlobalScope.onperiodicsync op een tijdstip naar keuze van de browser.
• PeriodicSyncManager . Registreert en verwijdert de registratie van periodieke synchronisaties en biedt tags voor geregistreerde synchronisaties. Haal een exemplaar van deze klasse op uit de eigenschap ServiceWorkerRegistration.periodicSync`.
• ServiceWorkerGlobalScope.onperiodicsync . Registreert een handler om de PeriodicSyncEvent te ontvangen.
• ServiceWorkerRegistration.periodicSync . Retourneert een verwijzing naar de PeriodicSyncManager .

Voorbeeld

Inhoud bijwerken

In het volgende voorbeeld wordt periodieke achtergrondsynchronisatie gebruikt om actuele 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 van updateArticles() is verpakt in event.waitUntil() , zodat de servicemedewerker 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 achtergrondsynchronisatie toevoegen aan een bestaande webapp

Deze reeks wijzigingen was nodig om periodieke achtergrondsynchronisatie toe te voegen aan een bestaande PWA . Dit voorbeeld bevat een aantal nuttige logboekinstructies die de status van periodieke achtergrondsynchronisatie in de webapp beschrijven.

Foutopsporing

Het kan een uitdaging zijn om een ​​volledig beeld te krijgen van periodieke achtergrondsynchronisatie terwijl u lokaal test. Informatie over actieve registraties, geschatte synchronisatie-intervallen en logboeken van eerdere synchronisatiegebeurtenissen bieden waardevolle context bij het opsporen van fouten in het gedrag van uw web-app. Gelukkig kun je al die informatie vinden via een experimentele functie in Chrome DevTools.

Lokale activiteit registreren

Het gedeelte Periodieke achtergrondsynchronisatie van DevTools is georganiseerd rond belangrijke gebeurtenissen in de levenscyclus van periodieke achtergrondsynchronisatie: registreren voor synchronisatie, uitvoeren van een achtergrondsynchronisatie en de registratie ongedaan maken. Om informatie over deze gebeurtenissen te verkrijgen, klikt u op Opname starten .

Tijdens het opnemen verschijnen er items in DevTools die overeenkomen met gebeurtenissen, waarbij de context en metagegevens voor elke gebeurtenis worden geregistreerd.

Nadat u de opname eenmaal hebt ingeschakeld, blijft deze maximaal drie dagen ingeschakeld, waardoor DevTools lokale foutopsporingsinformatie kan vastleggen over achtergrondsynchronisaties die kunnen plaatsvinden, zelfs uren in de toekomst.

Gebeurtenissen simuleren

Hoewel het opnemen van achtergrondactiviteit nuttig kan zijn, zijn er momenten waarop u uw periodicsync handler onmiddellijk wilt testen, zonder te wachten tot een gebeurtenis met de normale cadans wordt geactiveerd.

U kunt dit doen via de sectie Servicemedewerkers in het Applicatiepaneel in Chrome DevTools. In het veld Periodieke synchronisatie kunt u een tag opgeven die de gebeurtenis kan gebruiken, en deze zo vaak activeren als u wilt.

De DevTools-interface gebruiken

Vanaf Chrome 81 ziet u een sectie Periodieke achtergrondsynchronisatie in het DevTools- applicatiepaneel .