Sincronizzazione in background e aggiornamenti
Aggiorni le cache e sincronizzi quando torna online.
Sincronizzazione in background e aggiornamenti è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Mantenere aggiornate le cache
Un'app in grado di funzionare offline deve aggiornarsi senza problemi: distribuire nuove risorse, eliminare quelle obsolete e ritentare le azioni non riuscite quando la connessione torna disponibile. I service worker forniscono strumenti per tutte e tre le operazioni.
Nomi di cache con versione
Il meccanismo di aggiornamento più semplice consiste nell'usare un nome di cache con versione. Incrementando la versione si crea una nuova cache, mentre quella precedente resta disponibile per essere eliminata durante l'attivazione.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Eliminare le cache obsolete
Nell'evento activate, elenchi tutti i nomi delle cache ed elimini quelli che non corrispondono alla versione corrente. In questo modo libera spazio e rimuove le risorse obsolete.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});Il worker in attesa
Per impostazione predefinita, un nuovo worker viene installato ma rimane nello stato waiting finché tutte le pagine controllate dal worker precedente non vengono chiuse. In questo modo si evitano incompatibilità tra versioni durante la sessione.
skipWaiting
self.skipWaiting() indica a un worker in attesa di attivarsi immediatamente, assumendo il controllo senza aspettare la chiusura delle schede. Lo chiami durante install quando desidera applicare subito gli aggiornamenti.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Dopo l'attivazione, self.clients.claim() consente al nuovo worker di assumere immediatamente il controllo delle pagine già aperte, invece di controllare solo le navigazioni future.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Rilevare gli aggiornamenti dalla pagina
La pagina può ascoltare l'arrivo di un nuovo worker tramite l'evento updatefound della registrazione, quindi chiedere all'utente di ricaricare la pagina per ottenere la versione più recente.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Sincronizzazione in background
La Background Sync API consente di rimandare un'azione, come l'invio di un modulo, finché il dispositivo non dispone di connettività. Si registra un tag di sincronizzazione e il browser genera un evento sync quando torna online.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Gestire l'evento sync
Nel service worker, ascolti sync e verifichi il tag. Usi waitUntil per fare in modo che il browser mantenga attivo il worker fino al completamento del nuovo tentativo.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Schema accoda e sincronizza
Un flusso offline robusto consiste nel salvare l'azione in sospeso in IndexedDB, registrare una sincronizzazione e, nel gestore sync, leggere la coda e inviare ogni elemento con POST, rimuovendolo in caso di successo.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Riepilogo di aggiornamenti e sincronizzazione
Insieme, queste funzionalità rendono le app più resilienti: le cache versionate e la pulizia mantengono aggiornate le risorse, skipWaiting/clients.claim controllano i tempi di distribuzione e Background Sync completa in modo affidabile le azioni quando l'utente torna online.
Verifica rapida
Verifichi la sua comprensione degli aggiornamenti e della sincronizzazione in background.
Riepilogo
Ha imparato a gestire la sincronizzazione in background e gli aggiornamenti:
- Usare nomi di cache con versione ed eliminare le cache obsolete durante
activate. skipWaitingeclients.claimcontrollano i tempi degli aggiornamenti.- Rilevare le nuove versioni tramite
updatefound. - Background Sync rimanda le azioni fino al ritorno online tramite l'evento
sync. - Accodare le azioni in IndexedDB e svuotare la coda durante la sincronizzazione.
Ha completato la lezione sui Service Worker e sul caching offline.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 59
- Lezioni
- 200
Domande Frequenti
La lezione «Sincronizzazione in background e aggiornamenti» è gratuita?
Sì — il testo completo di «Sincronizzazione in background e aggiornamenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Sincronizzazione in background e aggiornamenti»?
Aggiorni le cache e sincronizzi quando torna online. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Sincronizzazione in background e aggiornamenti»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Registrare un Service Worker
- L'API Cache
- Strategie di caching
- Sincronizzazione in background e aggiornamenti