Strategie di caching offline: CacheFirst e NetworkFirst
Implementare Cache-First per le risorse statiche e Network-First per le risposte API usando la Cache API e la libreria Workbox
Strategie di caching offline: CacheFirst e NetworkFirst è una lezione Frontend 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Perché le strategie di caching sono importanti
I service worker possono intercettare ogni fetch, ma è necessaria una strategia. Contenuti diversi richiedono regole diverse: un logo dovrebbe essere memorizzato nella cache per sempre, una risposta API dovrebbe essere sempre aggiornata e gli articoli di giornale traggono vantaggio da stale-while-revalidate.
La Cache API
I service worker usano la Cache API: un archivio chiave-valore di coppie Request → Response, con ambito limitato a ogni origine. I dati persistono tra le sessioni.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Cache First
Controllate prima la cache. Se trovate la risorsa, restituitela. Altrimenti usate la rete e memorizzate nella cache la risposta. Ideale per: asset statici, font, loghi e app shell.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Network First
Provate prima la rete. Se non funziona (modalità offline), usate la cache. Ideale per: chiamate API e contenuti dinamici in cui l'aggiornamento è più importante della velocità.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Stale While Revalidate
Restituite subito la versione in cache (è veloce), quindi eseguite il fetch in background e aggiornate la cache per la prossima volta. Ideale per: avatar, articoli di giornale e dati parzialmente aggiornati.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Network Only
Ignorate completamente la cache e usate sempre la rete. Utilizzatelo per le richieste che non possono essere memorizzate nella cache (endpoint di autenticazione, analytics e mutazioni).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Cache Only
Non usate mai la rete: restituite la risorsa dalla cache oppure restituite un errore. È utile per i file precaricati che non devono mai essere aggiornati durante una sessione.
Strategie di Workbox
Workbox include tutte le strategie come classi nominate. Il codice ripetitivo è ridotto al minimo.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Scadenza della cache
Le cache crescono all'infinito se non impostate dei limiti. Workbox fornisce ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Risposte memorizzabili nella cache
Per impostazione predefinita, i browser memorizzano nella cache solo le risposte 200. Escludete le risposte 4xx, 5xx e opaque (cross-origin no-cors) per evitare di riempire la cache di errori.
Pagina di fallback offline
Mostrate una pagina offline chiara quando una navigazione non riesce: offre un'esperienza utente migliore rispetto all'errore predefinito del browser.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Scegliere la strategia giusta
Asset statici (logo, font, CSS): Cache First. Dati API (profilo utente, feed): Network First. Contenuti che devono essere aggiornati periodicamente (avatar, notizie): Stale While Revalidate. Autenticazione: Network Only. File statici preinstallati: Cache Only.
Verifica rapida
Quale strategia di caching è più adatta a un file CSS che cambia raramente, ma deve essere caricato rapidamente?
Riepilogo: strategie di caching
Cache First: asset statici (più veloce, ma i dati possono essere obsoleti). Network First: dati API (più aggiornati, ma più lento). Stale While Revalidate: serve la cache ed esegue il fetch in background. Network Only: autenticazione e mutazioni. Cache Only: app shell preinstallata. Usate Workbox per ridurre il codice ripetitivo. Impostate limiti di scadenza. Aggiungete una pagina di fallback offline. Scegliete la strategia in base al tipo di risorsa.
Domande Frequenti
La lezione «Strategie di caching offline: CacheFirst e NetworkFirst» è gratuita?
Sì — il testo completo di «Strategie di caching offline: CacheFirst e NetworkFirst» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Strategie di caching offline: CacheFirst e NetworkFirst»?
Implementare Cache-First per le risorse statiche e Network-First per le risposte API usando la Cache API e la libreria Workbox Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 offline: CacheFirst e NetworkFirst»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Il Web App Manifest
- Registrazione e ciclo di vita del Service Worker
- Strategie di caching offline: CacheFirst e NetworkFirst
- Notifiche push