Esperienze offline più complete con l'API Periodic Background Sync

Sincronizza i dati della tua app web in background per un'esperienza più simile a un'app

Jeff Posnick

Joe Medley

Hai mai riscontrato una delle seguenti situazioni?

• Viaggiare in treno o in metropolitana con una connessione instabile o assente
• La velocità è stata limitata dall'operatore dopo aver guardato troppi video
• Vivere in un paese in cui la larghezza di banda fatica a stare al passo con la domanda

Se è così, avrai sicuramente provato la frustrazione di dover svolgere determinate attività sul web e ti sarai chiesto perché le app specifiche per le piattaforme spesso funzionano meglio in questi scenari. Le app specifiche per la piattaforma possono recuperare in anticipo contenuti aggiornati, come articoli di notizie o informazioni meteo. Anche se non c'è copertura della rete nella metropolitana, puoi comunque leggere le notizie.

La sincronizzazione periodica in background consente alle applicazioni web di sincronizzare periodicamente i dati in background, avvicinandole al comportamento di un'app specifica per la piattaforma.

Prova

Puoi provare la sincronizzazione in background periodica con l'app demo in tempo reale. Prima di utilizzarla, assicurati che:

• Stai utilizzando Chrome 80 o versioni successive.
• Devi installare l'app web prima di attivare la sincronizzazione in background periodica.

Concetti e utilizzo

La sincronizzazione in background periodica ti consente di mostrare contenuti aggiornati quando viene lanciata un'app web progressiva o una pagina basata su service worker. A tal fine, scarica i dati in background quando l'app o la pagina non sono in uso. In questo modo, i contenuti dell'app non vengono aggiornati dopo l'avvio mentre vengono visualizzati. Meglio ancora, impedisce all'app di mostrare un'animazione di caricamento dei contenuti prima dell'aggiornamento.

Senza la sincronizzazione in background periodica, le app web devono utilizzare metodi alternativi per scaricare i dati. Un esempio comune è l'utilizzo di una notifica push per riattivare un worker del servizio. L'utente viene interrotto da un messaggio come "Nuovi dati disponibili". L'aggiornamento dei dati è essenzialmente un effetto collaterale. Hai comunque la possibilità di usare le notifiche push per aggiornamenti davvero importanti, come le ultime notizie significative.

La sincronizzazione periodica in background è facilmente confusa con la sincronizzazione in background. Sebbene abbiano nomi simili, i casi d'uso sono diversi. Tra le altre cose, la sincronizzazione in background viene utilizzata più comunemente per inviare nuovamente i dati a un server quando una richiesta precedente non è andata a buon fine.

Ottimizzare il coinvolgimento degli utenti

Se eseguita in modo errato, la sincronizzazione in background periodica potrebbe comportare uno spreco delle risorse degli utenti. Prima di rilasciarlo, Chrome lo ha sottoposto a un periodo di prova per verificare che fosse corretto. Questa sezione illustra alcune delle decisioni di progettazione prese da Chrome per rendere questa funzionalità il più utile possibile.

La prima decisione di progettazione presa da Chrome è che un'app web può utilizzare la sincronizzazione in background periodica solo dopo che una persona l'ha installata sul proprio dispositivo e l'ha avviata come applicazione distinta. La sincronizzazione periodica in background non è disponibile nel contesto di una normale scheda di Chrome.

Inoltre, poiché Chrome non vuole che le app web inutilizzate o usate di rado consumino inutilmente batteria o dati, ha progettato la sincronizzazione in background periodica in modo che gli sviluppatori debbano guadagnarsela offrendo valore ai propri utenti. Nello specifico, Chrome utilizza un punteggio di coinvolgimento del sito (about://site-engagement/) per determinare se e con quale frequenza possono verificarsi sincronizzazioni in background periodiche per una determinata app web. In altre parole, un evento periodicsync non verrà attivato a meno che il punteggio di coinvolgimento sia maggiore di zero e il suo valore influisca sulla frequenza con cui viene attivato l'evento periodicsync. In questo modo, le uniche app che si sincronizzano in background sono quelle che stai utilizzando attivamente.

La sincronizzazione in background periodica condivide alcune somiglianze con le API e le pratiche esistenti sulle piattaforme più diffuse. Ad esempio, la sincronizzazione in background una tantum e le notifiche push consentono alla logica di un'app web di rimanere in vita un po' più a lungo (tramite il suo servizio worker) dopo che una persona ha chiuso la pagina. Sulla maggior parte delle piattaforme, è comune che gli utenti abbiano installato app che accedono periodicamente alla rete in background per offrire un'esperienza utente migliore per aggiornamenti critici, precaricamento dei contenuti, sincronizzazione dei dati e così via. Analogamente, la sincronizzazione in background periodica estende anche la durata della logica di un'app web in modo che venga eseguita a intervalli regolari per alcuni minuti alla volta.

Se il browser consentisse che ciò si verificasse di frequente e senza restrizioni, potrebbe verificarsi qualche problema di privacy. Ecco come Chrome ha risolto questo rischio per la sincronizzazione periodica in background:

• L'attività di sincronizzazione in background si verifica solo su una rete a cui il dispositivo si è collegato in precedenza. Chrome consiglia di connettersi solo a reti gestite da entità di terze parti attendibili.
• Come per tutte le comunicazioni via internet, la sincronizzazione in background periodica rivela gli indirizzi IP del client, del server con cui comunica e il nome del server. Per ridurre questa esposizione a un valore approssimativo di quello che sarebbe se l'app si sincronizzasse solo quando era in primo piano, il browser limita la frequenza delle sincronizzazioni in background di un'app in base alla frequenza con cui la persona la utilizza. Se la persona smette di interagire di frequente con l'app, la sincronizzazione in background periodica non verrà più attivata. Si tratta di un netto miglioramento rispetto allo status quo delle app specifiche per la piattaforma.

Quando può essere utilizzata?

Le regole di utilizzo variano in base al browser. Per riepilogare quanto sopra, Chrome impone i seguenti requisiti alla sincronizzazione periodica in background:

• Un determinato punteggio di coinvolgimento degli utenti.
• Presenza di una rete utilizzata in precedenza.

Le tempistiche delle sincronizzazioni non sono controllate dagli sviluppatori. La frequenza della sincronizzazione sarà in linea con la frequenza di utilizzo dell'app. Tieni presente che al momento le app specifiche della piattaforma non lo fanno. Inoltre, vengono presi in considerazione lo stato di alimentazione e di connettività del dispositivo.

Quando deve essere utilizzato?

Quando il tuo service worker si attiva per gestire un evento periodicsync, hai la opportunità di richiedere dati, ma non l'obbligo di farlo. Quando gestisci l'evento, devi prendere in considerazione le condizioni della rete e lo spazio di archiviazione disponibile e scaricare quantità diverse di dati in risposta. Per ricevere assistenza, puoi utilizzare le seguenti risorse:

• API Network Information
• Rilevamento della modalità Risparmio dati
• Stima dello spazio di archiviazione disponibile

Autorizzazioni

Dopo aver installato il service worker, utilizza l'API Permissions per eseguire query su periodic-background-sync. Puoi farlo da una finestra o da un contesto di worker di servizio.

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.
}

Registrazione di una sincronizzazione periodica

Come già affermato, la sincronizzazione periodica in background richiede un servizio worker. Recupera un PeriodicSyncManager utilizzando ServiceWorkerRegistration.periodicSync e chiama register(). La registrazione richiede sia un tag sia un intervallo minimo di sincronizzazione (minInterval). Il tag identifica la sincronizzazione registrata in modo da poter registrare più sincronizzazioni. Nell'esempio seguente, il nome del tag è 'content-sync' e minInterval è un giorno.

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.
  }
}

Verificare una registrazione

Chiama periodicSync.getTags() per recuperare un array di tag di registrazione. L'esempio riportato di seguito utilizza i nomi dei tag per confermare che l'aggiornamento della cache è attivo per evitare un nuovo aggiornamento.

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

Puoi anche utilizzare getTags() per mostrare un elenco di registrazioni attive nella pagina delle impostazioni della tua app web in modo che gli utenti possano attivare o disattivare tipi specifici di aggiornamenti.

Rispondere a un evento di sincronizzazione in background periodica

Per rispondere a un evento di sincronizzazione in background periodica, aggiungi un gestore di eventi periodicsync al tuo service worker. L'oggetto event passato conterrà un parametro tag corrispondente al valore utilizzato durante la registrazione. Ad esempio, se è stata registrata una sincronizzazione in background periodica con il nome 'content-sync', event.tag sarà '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.
});

Annullamento della registrazione di una sincronizzazione

Per terminare una sincronizzazione registrata, chiama periodicSync.unregister() con il nome della sincronizzazione di cui vuoi annullare la registrazione.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

Interfacce

Ecco una breve panoramica delle interfacce fornite dall'API Periodic Background Sync.

• PeriodicSyncEvent. Viene passato al gestore eventi ServiceWorkerGlobalScope.onperiodicsync in un momento scelto dal browser.
• PeriodicSyncManager. Registra e annulla la registrazione delle sincronizzazioni periodiche e fornisce i tag per le sincronizzazioni registrate. Recupera un'istanza di questa classe dalla proprietà ServiceWorkerRegistration.periodicSync.
• ServiceWorkerGlobalScope.onperiodicsync. Registra un gestore per ricevere il PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. Restituisce un riferimento a PeriodicSyncManager.

Esempio

Aggiornamento dei contenuti

L'esempio seguente utilizza la sincronizzazione in background periodica per scaricare e memorizzare nella cache gli articoli aggiornati di un sito di notizie o di un blog. Tieni presente il nome del tag, che indica il tipo di sincronizzazione ('update-articles'). La chiamata a updateArticles() è racchiusa in event.waitUntil() in modo che il service worker non venga terminato prima che gli articoli vengano scaricati e archiviati.

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

Aggiunta della sincronizzazione periodica in background a un'app web esistente

Questo insieme di modifiche è stato necessario per aggiungere la sincronizzazione in background periodica a una PWA esistente. Questo esempio include una serie di istruzioni di logging utili che descrivono lo stato della sincronizzazione in background periodica nell'app web.

Debug

Può essere difficile ottenere una visualizzazione end-to-end della sincronizzazione in background periodica durante i test locali. Le informazioni sulle registrazioni attive, sugli intervalli di sincronizzazione approssimativi e sui log degli eventi di sincronizzazione passati forniscono un contesto utile durante il debug del comportamento della tua app web. Fortunatamente, puoi trovare tutte queste informazioni tramite una funzionalità sperimentale in Chrome DevTools.

Registrazione delle attività locali

La sezione Sincronizzazione periodica in background di DevTools è organizzata in base agli eventi chiave nel ciclo di vita della sincronizzazione periodica in background: registrazione alla sincronizzazione, esecuzione di una sincronizzazione in background e annullamento della registrazione. Per ottenere informazioni su questi eventi, fai clic su Avvia registrazione.

Durante la registrazione, in DevTools vengono visualizzate le voci corrispondenti agli eventi, con il contesto e i metadati registrati per ciascuno.

Una volta attivata, la registrazione rimarrà attiva per un massimo di tre giorni, consentendo a DevTools di acquisire informazioni di debug locale sulle sincronizzazioni in background che potrebbero verificarsi, anche a distanza di ore.

Simulazione di eventi

Sebbene la registrazione dell'attività in background possa essere utile, a volte potresti voler testare immediatamente il gestore periodicsync, senza attendere che venga attivato un evento con la sua normale cadenza.

Puoi farlo tramite la sezione Service worker nel riquadro Applicazione di Chrome DevTools. Il campo Sincronizzazione periodica ti consente di fornire un tag da utilizzare per l'evento e di attivarlo tutte le volte che vuoi.

Utilizzo dell'interfaccia di DevTools

A partire da Chrome 81, vedrai una sezione Sincronizzazione in background periodica nel pannello Applicazione di DevTools.