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

Sincronizza i dati dell'app web in background per un'esperienza più simile a quella di un'app

Jeff Posnick

Joe Medley

Ti è mai capitato di trovarti in una delle seguenti situazioni?

• Viaggiare in treno o metropolitana con connettività instabile o assente
• È stato limitato 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 è stato così, hai sicuramente sentito la frustrazione di ricevere alcune attività svolte sul web e chiedendo perché le app specifiche per piattaforma spesso migliorano in questi scenari. Le app specifiche per le piattaforme possono recuperare contenuti aggiornati, come articoli o meteo le informazioni in anticipo. Anche se non c'è una rete nella metropolitana, puoi comunque leggere i notizie.

La sincronizzazione periodica in background consente alle applicazioni web di sincronizzarsi periodicamente dati in background, avvicinando le app web al comportamento di una piattaforma specifica dell'app.

Prova

Puoi provare a effettuare una sincronizzazione periodica in background con la demo dal vivo Google Cloud. Prima di utilizzarla, assicurati di:

• Usi Chrome 80 o versioni successive.
• Tu installa sull'app web prima di attivare la sincronizzazione periodica in background.

Concetti e utilizzo

La sincronizzazione periodica in background ti consente di mostrare contenuti aggiornati quando un'app web progressiva o una pagina supportata da un service worker. A tale scopo, scarica i dati in sullo sfondo quando l'app o la pagina non sono in uso. Questo impedisce all'app l'aggiornamento dei contenuti dopo il lancio durante la visualizzazione. Meglio ancora, impedisce all'app di mostrare una rotellina dei contenuti prima dell'aggiornamento.

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

La sincronizzazione periodica in background può essere facilmente confusa con la sincronizzazione in background. Anche se hanno nomi simili, ma i casi d'uso sono diversi. Tra le altre cose, la sincronizzazione in background viene utilizzata principalmente per inviare di nuovo i dati a un server quando la precedente richiesta non è andata a buon fine.

Ottenere il giusto coinvolgimento degli utenti

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

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

Inoltre, poiché Chrome non vuole che app web inutilizzate o usate raramente, consumare batteria o dati, Chrome ha progettato sincronizzazione periodica in background in modo che gli sviluppatori dovranno guadagnarselo offrendo valore ai propri utenti. Concretamente Chrome utilizza un punteggio di coinvolgimento sul sito (about://site-engagement/) per determinare se e con quale frequenza si possono verificare sincronizzazioni in background periodiche per una determinata app web. In altre parole, un evento periodicsync non verrà attivato a meno che il coinvolgimento è maggiore di zero e il suo valore influisce sulla frequenza con cui Eventi periodicsync attivati. In questo modo ti assicuri che le uniche app che si sincronizzano sono quelli che stai utilizzando attivamente.

La sincronizzazione periodica in background presenta alcune analogie con le API esistenti e sulle piattaforme più diffuse. Ad esempio, una sincronizzazione una tantum in background le notifiche push consentono alla logica di un'app web di durare più a lungo (tramite service worker) dopo che una persona ha chiuso la pagina. Sulla maggior parte delle piattaforme, comune per le persone che hanno installato app che accedono periodicamente alla rete in in background per offrire una migliore esperienza utente in caso di aggiornamenti critici, il precaricamento dei contenuti, la sincronizzazione dei dati e così via. Analogamente, la sincronizzazione periodica in background estende la durata della logica di un'app web in modo che venga eseguita a periodi regolari per quale potrebbe richiedere alcuni minuti.

Se il browser consentiva di farlo di frequente e senza limitazioni, potrebbero causare problemi di privacy. Ecco come Chrome ha affrontato questo problema rischio di sincronizzazione periodica in background:

• L'attività di sincronizzazione in background viene eseguita soltanto su una rete di cui dispone il dispositivo a cui era connesso in precedenza. Chrome consiglia di connettersi solo a reti gestite da affidabili.
• Come per tutte le comunicazioni internet, la sincronizzazione periodica in background rivela gli indirizzi IP del client, il server a cui comunica e il nome o server web. Per ridurre l'esposizione a ciò che si otterrebbe se l'app fosse sincronizzati quando erano in primo piano, il browser limita la frequenza di la sincronizzazione in background dell'app viene sincronizzata con la frequenza con cui la persona utilizza l'app. Se la persona smette di interagire frequentemente con l'app, la sincronizzazione periodica in background smetterà di attivarsi. Si tratta di un netto miglioramento rispetto allo status quo delle metriche app.

Quando può essere utilizzato?

Le regole di utilizzo variano in base al browser. Ricapitolando, Chrome mette il i seguenti requisiti per la sincronizzazione periodica in background:

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

La tempistica delle sincronizzazioni non è controllata dagli sviluppatori. La frequenza di sincronizzazione si allineerà con la frequenza di utilizzo dell'app. Tieni presente che al momento le app specifiche per le piattaforme non supportano questa operazione.) Sfrutta anche la potenza e lo stato di connettività.

Quando deve essere utilizzato?

Quando il tuo service worker si riattiva per gestire un evento periodicsync, hai il l'opportunità di richiedere i dati, ma non l'obbligo di farlo. Durante la gestione all'evento in cui devi trasferire le condizioni di rete e lo spazio di archiviazione disponibile considerazione e scaricare diverse quantità di dati in risposta. Puoi utilizzare le seguenti risorse per aiutarti:

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

Autorizzazioni

Dopo aver installato il service worker, usa le autorizzazioni API per eseguire query per periodic-background-sync. Puoi eseguire questa operazione da una finestra o del 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.
}

Registrazione di una sincronizzazione periodica

Come già detto, la sincronizzazione periodica in background richiede un service worker. Recupera PeriodicSyncManager usando ServiceWorkerRegistration.periodicSync e chiama register(). La registrazione richiede sia un tag che una intervallo di sincronizzazione (minInterval). Il tag identifica la sincronizzazione registrata in modo da poter registrare più sincronizzazioni. Nell'esempio riportato di seguito, 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. La l'esempio riportato di seguito utilizza i nomi dei tag per confermare che l'aggiornamento della cache sia attivo ed evitare eseguendo di nuovo 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 utilizzare getTags() anche per mostrare un elenco delle registrazioni attive sul tuo sito web pagina delle impostazioni dell'app per consentire agli utenti di attivare o disattivare tipi specifici di aggiornamenti.

Rispondere a un evento di sincronizzazione periodica in background

Per rispondere a un evento di sincronizzazione periodica in background, aggiungi un evento periodicsync al tuo service worker. L'oggetto event passato all'oggetto conterrà un Parametro tag corrispondente al valore utilizzato durante la registrazione. Ad esempio, se un la sincronizzazione periodica in background è stata registrata con il nome 'content-sync', quindi Il valore di 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 del eseguire la sincronizzazione.

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

Interfacce

Ecco un rapido riassunto delle interfacce fornite da Periodic Background l'API Sync.

• PeriodicSyncEvent. Passato al gestore di eventi ServiceWorkerGlobalScope.onperiodicsync in un scelta dal browser.
• PeriodicSyncManager. Registra e annulla la registrazione delle sincronizzazioni periodiche e fornisce i tag per viene sincronizzato. Recupera un'istanza di questa classe da ServiceWorkerRegistration.periodicSync` proprietà.
• ServiceWorkerGlobalScope.onperiodicsync. Registra un gestore per ricevere PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. Restituisce un riferimento a PeriodicSyncManager.

Esempio

Aggiornamento dei contenuti

L'esempio seguente utilizza una sincronizzazione periodica in background per scaricare e memorizzare nella cache articoli aggiornati per un sito di notizie o un blog. Nota il nome del tag, che indica che tipo di sincronizzazione è ('update-articles'). La chiamata a updateArticles() è racchiusa in event.waitUntil() in modo che il service worker non termini 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 di una sincronizzazione periodica in background a un'app web esistente

Queste modifiche sono state necessarie per aggiungere sincronizzazione periodica in background con una PWA esistente. Questo esempio include una serie di utili istruzioni di logging che descrivono stato della sincronizzazione periodica in background nell'app web.

Debug

Può essere complicato ottenere una visualizzazione end-to-end della sincronizzazione periodica in background durante i test in locale. Informazioni sulle registrazioni attive, sincronizzazione approssimativa gli intervalli e i log degli eventi di sincronizzazione passati forniscono un contesto prezioso durante il debug il comportamento della tua applicazione web. Fortunatamente, puoi trovare tutte queste informazioni tramite una funzionalità sperimentale di Chrome DevTools.

Registrazione attività locale

La sezione Sincronizzazione periodica in background di DevTools è organizzata in base a eventi chiave nel ciclo di vita periodica della sincronizzazione in background: la registrazione per la sincronizzazione, l'esecuzione la sincronizzazione in background e l'annullamento della registrazione. Per ottenere informazioni su questi eventi, Fai clic su Avvia registrazione.

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

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

Simulazione di eventi

Sebbene la registrazione dell'attività in background possa essere utile, a volte vuoi testare subito il gestore periodicsync, senza aspettare affinché si attivi con la sua frequenza normale.

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

Utilizzo dell'interfaccia DevTools

A partire da Chrome 81, vedrai la sezione Sincronizzazione periodica in background nella Riquadro Applicazione di DevTools.