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

Joe Medley
Joe Medley

Ti è mai capitato di trovarti in 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, avvicinando le app web al comportamento di un'applicazione specifica della piattaforma.

Prova

Puoi provare a eseguire una sincronizzazione periodica in background con l'app demo dal vivo. Prima di utilizzarla, assicurati che:

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

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. Per farlo, 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 di mostrare nell'app la rotellina 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 periodica in background potrebbe causare uno spreco di risorse degli utenti. Prima di rilasciarlo, Chrome lo ha sottoposto a un periodo di prova per verificare che fosse corretto. In questa sezione vengono spiegate alcune decisioni di progettazione prese da Chrome per rendere la 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 non 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, una sincronizzazione in background una tantum e le notifiche push consentono alla logica di un'app web di durare più a lungo (tramite il service worker) dopo che una persona ha chiuso la pagina. Sulla maggior parte delle piattaforme, spesso le persone installano app che accedono periodicamente alla rete in background per fornire una migliore esperienza utente per aggiornamenti critici, precaricamento di 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 l'esposizione a quello che sarebbe approssimativamente se l'app si sincronizzasse solo quando era in primo piano, il browser limita la frequenza delle sincronizzazioni in background di un'app per allinearsi alla frequenza con cui la persona utilizza l'app. Se la persona smette di interagire spesso con l'app, viene interrotta la sincronizzazione periodica in background. 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 per 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. Puoi utilizzare le seguenti risorse per ricevere assistenza:

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 richiama 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 sia attivo ed evitare di ripetere l'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 periodica in background

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 degli eventi ServiceWorkerGlobalScope.onperiodicsync in un momento scelto dal browser.
  • PeriodicSyncManager. Registra e annulla la registrazione delle sincronizzazioni periodiche e fornisce 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 articoli aggiornati per un sito di notizie o 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 interrotto 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 utili istruzioni di logging che descrivono lo stato della sincronizzazione periodica in background 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.

Il pulsante di registrazione in DevTools
Il pulsante di registrazione in DevTools

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

Un esempio di dati della sincronizzazione periodica in background registrati
Un esempio di dati di sincronizzazione periodica in background registrati

Dopo aver attivato la registrazione una volta, la registrazione rimarrà attiva per un massimo di tre giorni, consentendo a DevTools di acquisire informazioni di debug locali sulle sincronizzazioni in background che potrebbero avvenire, anche di ore in futuro.

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

La sezione "Service worker" del riquadro Applicazione mostra un campo di testo e un pulsante "Sincronizzazione periodica".

Utilizzo dell'interfaccia di DevTools

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

Il riquadro Applicazione che mostra la sezione Sincronizzazione periodica in background