Strategie di caching
Applichi i pattern cache-first e network-first.
Strategie di caching è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Perché le strategie sono importanti
Risorse diverse richiedono una gestione diversa. Un logo può essere fornito dalla cache per sempre, mentre un feed API deve essere aggiornato. Una strategia di caching stabilisce se provare prima la cache o la rete e come combinarle.
Cache-first
Cache-first: controlli la cache; se trova la risorsa, la restituisca; altrimenti la recuperi dalla rete. È ideale per risorse statiche e soggette a pochi cambiamenti, come font, CSS e immagini.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}Cache-first con memorizzazione di riserva
In caso di mancata corrispondenza nella cache, può recuperare il risultato e memorizzarlo, così la richiesta successiva sarà rapida. In questo modo la cache si riscalda gradualmente mentre gli utenti navigano.
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}Network-first
Network-first: provi prima la rete; se la richiesta riesce, utilizzi e memorizzi il risultato; se fallisce (modalità offline), ricorra alla cache. È ideale per contenuti aggiornati frequentemente, come notizie o dashboard.
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}Stale-While-Revalidate
Stale-while-revalidate: restituisce immediatamente la copia memorizzata nella cache per una risposta rapida, mentre recupera in background una copia aggiornata per aggiornare la cache per la prossima richiesta. Un ottimo equilibrio tra velocità e aggiornamento.
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}Network-Only e Cache-Only
Due semplici estremi:
- Network-only: recupera sempre dalla rete e non usa mai la cache (ad esempio per i beacon di analisi).
- Cache-only: fornisce solo risorse precaricate e non accede mai alla rete (ad esempio per un app shell).
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);Routing in base al tipo di richiesta
Nelle app reali si sceglie una strategia per ogni richiesta. Nel gestore fetch, esamini request.url o request.destination e instradi la richiesta di conseguenza.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});Gestione dei fallback offline
Quando né la rete né la cache restituiscono risultati, fornisca una pagina offline chiara o un segnaposto invece di una risposta non funzionante.
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}Memorizzare nella cache solo le risposte riuscite
Eviti di memorizzare gli errori nella cache. Verifichi response.ok (o lo stato) prima di salvare la risposta, così un 404 o un 500 non contamina la cache.
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;Scelta della strategia
Abbini la strategia al contenuto:
- Risorse statiche: cache-first
- Dati dinamici: network-first
- Contenuti misti: stale-while-revalidate
La maggior parte delle app combina diverse strategie tramite il routing delle richieste.
Riepilogo delle strategie
Le strategie di caching consentono a un unico service worker di gestire in modo intelligente l'intera app: risorse statiche disponibili istantaneamente, dati dinamici aggiornati e fallback offline appropriati, tutto scelto in base alla richiesta.
Verifica rapida
Verifichi la sua comprensione delle strategie di caching.
Riepilogo
Ha imparato a usare le strategie di caching:
- Cache-first per le risorse statiche.
- Network-first per dati dinamici aggiornati.
- Stale-while-revalidate per combinare velocità e aggiornamento.
- Instradare ogni richiesta tramite
request.url/destination. - Memorizzare nella cache solo le risposte riuscite e fornire fallback offline.
Ora passiamo alla sincronizzazione in background e agli aggiornamenti della cache.
Domande Frequenti
La lezione «Strategie di caching» è gratuita?
Sì — il testo completo di «Strategie di caching» è 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 «Strategie di caching»?
Applichi i pattern cache-first e network-first. 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 3 di 4.
Quanto tempo richiede la lezione «Strategie di caching»?
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