Sincronizza i dati della tua app web in background per un'esperienza più simile a quella delle app
Ti sei mai trovato in una delle seguenti situazioni?
- Guida di un treno o della 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 l'hai fatto, avrai sicuramente provato la frustrazione di portare a termine determinate attività sul web e ti sei chiesto perché le app specifiche per piattaforma spesso ottengono risultati migliori in questi scenari. Le app specifiche per piattaforma possono recuperare in anticipo contenuti aggiornati, come notizie o informazioni meteo. Anche se non ci sono reti nella metropolitana, puoi comunque leggere le notizie.
Sincronizzazione periodica in background consente alle applicazioni web di sincronizzare periodicamente i dati in background, avvicinando le app web al comportamento di un'app specifica della piattaforma.
Prova
Puoi provare la sincronizzazione in background periodica con l'app demo dal vivo. Prima di utilizzarla, assicurati che:
- Usi Chrome 80 o versioni successive.
- Installa l'app web prima di attivare la sincronizzazione in background periodica.
Concetti e utilizzo
La sincronizzazione periodica in background ti consente di mostrare contenuti aggiornati all'avvio di un'app web progressiva o di una pagina supportata dal service worker. Per farlo, scarica i dati in background quando l'app o la pagina non è in uso. In questo modo, i contenuti dell'app non vengono aggiornati dopo l'avvio durante la visualizzazione. Meglio ancora, impedisce all'app di mostrare una rotellina dei contenuti prima dell'aggiornamento.
Senza 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 utilizzare le notifiche push per aggiornamenti davvero importanti, come le ultime notizie più importanti.
La sincronizzazione in background periodica può essere facilmente confusa con la sincronizzazione in background. Anche se hanno nomi simili, i loro casi d'uso sono diversi. Tra le altre cose, la sincronizzazione in background viene utilizzata principalmente per inviare nuovamente i dati a un server quando una precedente richiesta non è andata a buon fine.
Come aumentare il coinvolgimento degli utenti
Se l'operazione viene eseguita in modo errato, la sincronizzazione periodica in background potrebbe comportare uno spreco di risorse degli utenti. Prima del rilascio, Chrome lo ha sottoposto a un periodo di prova per assicurarsi che fosse corretto. In questa sezione vengono spiegate alcune decisioni di progettazione che Chrome ha preso 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 dispositivo e l'ha lanciata come applicazione distinta. La sincronizzazione periodica in background non è disponibile nel contesto di una scheda standard di Chrome.
Inoltre, poiché Chrome non vuole che le app web inutilizzate o usate raramente consumino senza costi batteria o dati, Chrome ha progettato una sincronizzazione periodica in background in modo che gli sviluppatori debbano guadagnarla fornendo un valore ai loro utenti. Concretamente,
Chrome usa un punteggio di coinvolgimento del sito
(about://site-engagement/) per determinare se e con quale frequenza possono essere eseguite sincronizzazioni periodiche in background per una determinata app web. In altre parole, un evento periodicsync non viene 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. Ciò garantisce che le uniche app che si sincronizzano in background siano quelle che stai utilizzando attivamente.
La sincronizzazione periodica in background presenta alcune somiglianze con le API esistenti e le pratiche 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 un po' più a lungo (tramite il service worker) dopo che una persona ha chiuso la pagina. Sulla maggior parte delle piattaforme, accade di frequente che gli utenti abbiano installato app che accedono periodicamente alla rete in background per offrire una migliore esperienza utente per gli 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 alcuni minuti alla volta.
Se il browser consente che l'operazione si verifichi spesso e senza limitazioni, potrebbero verificarsi problemi di privacy. Ecco in che modo Chrome ha affrontato questo rischio per la sincronizzazione in background periodica:
- L'attività di sincronizzazione in background si verifica solo su una rete a cui il dispositivo è stato precedentemente connesso. Chrome consiglia di connettersi solo a reti gestite da soggetti attendibili.
- Come per tutte le comunicazioni internet, la sincronizzazione periodica in background rivela gli indirizzi IP del client, il server con cui sta comunicando e il nome del server. Per ridurre all'incirca questa esposizione a quello che accadrebbe se l'app venisse sincronizzata 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 la utilizza. Se la persona smette di interagire spesso con l'app, la sincronizzazione periodica in background viene interrotta. Si tratta di un netto miglioramento rispetto allo status quo delle app specifiche della piattaforma.
Quando può essere utilizzata?
Le regole per l'utilizzo variano in base al browser. Ricapitolando quanto riportato sopra, Chrome impone i seguenti requisiti alla sincronizzazione periodica in background:
- Un punteggio di coinvolgimento degli utenti specifico.
- Presenza di una rete usata in precedenza.
La tempistica delle sincronizzazioni non è controllata dagli sviluppatori. La frequenza di sincronizzazione si allinea a quella di utilizzo dell'app. (Tieni presente che al momento le app specifiche per piattaforma non lo fanno.) Prende anche lo stato di alimentazione e connettività del dispositivo.
Quando deve essere utilizzato?
Quando il tuo service worker si riattiva per gestire un evento periodicsync, hai
l'opportunità di richiedere dati, ma non l'obbligo di farlo. Quando gestisci
l'evento, dovresti prendere in considerazione le condizioni di rete e lo spazio di archiviazione disponibile
e scaricare diverse quantità di dati in risposta. Puoi utilizzare le seguenti risorse:
- API Network Information
- Rilevamento della modalità Risparmio dati
- Stima dello spazio di archiviazione disponibile
Autorizzazioni
Dopo l'installazione del service worker, utilizza l'APIPermissions per eseguire una query su periodic-background-sync. Puoi farlo da una finestra
o da un contesto di 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 in background periodica richiede un service worker. Recupera un PeriodicSyncManager utilizzando ServiceWorkerRegistration.periodicSync e chiama register() su di esso. La registrazione richiede sia un tag sia un intervallo minimo di sincronizzazione (minInterval). Il tag identifica la sincronizzazione registrata per consentire la registrazione di più sincronizzazioni. Nell'esempio riportato di seguito, il nome del tag è 'content-sync' e minInterval è di 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.
}
}
Verifica di una registrazione
Richiama 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 delle registrazioni attive nella pagina delle impostazioni dell'app web, in modo che gli utenti possano attivare o disattivare tipi specifici di aggiornamenti.
Rispondere a un evento periodico di sincronizzazione in background
Per rispondere a un evento periodico di sincronizzazione in background, aggiungi un gestore di eventi periodicsync al service worker. L'oggetto event passato all'oggetto conterrà un
parametro tag corrispondente al valore utilizzato durante la registrazione. Ad esempio se
è stata registrata una sincronizzazione periodica in background 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 un rapido resoconto delle interfacce fornite dall'API Periodic Background Sync.
PeriodicSyncEvent. Passato al gestore di eventiServiceWorkerGlobalScope.onperiodicsyncin 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 riceverePeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Restituisce un riferimento aPeriodicSyncManager.
Esempio
Aggiornamento dei contenuti
L'esempio seguente utilizza una sincronizzazione in background periodica per scaricare e memorizzare nella cache gli articoli aggiornati di un sito di notizie o un blog. Nota il nome del tag, che indica il tipo di sincronizzazione ('update-articles'). La chiamata a updateArticles() è aggregata 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
Questo insieme di modifiche è stato necessario per aggiungere una sincronizzazione periodica in background a una PWA esistente. Questo esempio include una serie di istruzioni di logging utili che descrivono lo stato della sincronizzazione periodica in background nell'app web.
Debug
Può essere difficile ottenere una visione end-to-end della sincronizzazione periodica in background durante i test localmente. Le informazioni sulle registrazioni attive, sugli intervalli approssimativi di sincronizzazione e sui log degli eventi di sincronizzazione passati forniscono un contesto prezioso durante il debug del comportamento della tua app web. Fortunatamente, puoi trovare tutte queste informazioni tramite una funzionalità sperimentale in Chrome DevTools.
Registrazione dell'attività locale in corso...
La sezione Sincronizzazione periodica in background di DevTools è organizzata in base agli eventi chiave nel ciclo di vita periodico della sincronizzazione in background: registrazione per la 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, le voci vengono visualizzate in DevTools corrispondenti agli eventi, con contesto e 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 verificarsi, anche ore in futuro.
Simulare eventi
Sebbene la registrazione dell'attività in background possa essere utile, in alcuni casi è consigliabile testare il gestore periodicsync immediatamente, senza attendere che un evento si attivi con la sua normale cadenza.
A tale scopo, accedi alla sezione Service worker nel riquadro Applicazione in Chrome DevTools. Il campo Sincronizzazione periodica ti consente di fornire un tag per l'evento da utilizzare e di attivarlo tutte le volte che vuoi.
Utilizzare l'interfaccia di DevTools
A partire da Chrome 81, vedrai una sezione Sincronizzazione periodica in background nel riquadro Applicazione di DevTools.
