Sincronizza i dati della tua app web in background per un'esperienza più simile a un'app
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:
- 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 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 eventiServiceWorkerGlobalScope.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 ilPeriodicSyncEvent
.ServiceWorkerRegistration.periodicSync
. Restituisce un riferimento aPeriodicSyncManager
.
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.
Durante la registrazione, in DevTools vengono visualizzate le voci corrispondenti agli eventi, con il contesto e i metadati registrati per ciascuno.
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.
Utilizzo dell'interfaccia di DevTools
A partire da Chrome 81, vedrai una sezione Sincronizzazione in background periodica nel pannello Applicazione di DevTools.