Strategie per i service worker
Cache-first, network-first, stale-while-revalidate — scelta in base al tipo di risorsa.
Strategie per i service worker è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Panoramica delle strategie di caching
Un service worker intercetta le richieste di rete e decide se rispondere dalla cache, dalla rete o da entrambe. Workbox definisce quattro strategie fondamentali, ciascuna adatta a un diverso tipo di risorsa.
CacheFirst
CacheFirst risponde dalla cache e accede alla rete solo in caso di mancato riscontro. È ideale per risorse che cambiano raramente e i cui URL contengono un hash del contenuto, come font e immagini.
// serve cached, fall back to network on missNetworkFirst
NetworkFirst prova prima la rete e ricorre alla cache quando si è offline o si verifica un timeout. È ideale per le risposte delle API, quando l'aggiornamento dei dati è importante ma si desidera anche l'accesso offline.
// try network, fall back to cache when offlineStaleWhileRevalidate
StaleWhileRevalidate restituisce immediatamente la copia in cache per garantire rapidità, mentre recupera una copia aggiornata in background per aggiornare la cache. È ottima per i bundle JavaScript e CSS.
// return cache now, update cache in backgroundNetworkOnly e CacheOnly
I due estremi: NetworkOnly esegue sempre il recupero dalla rete, senza caching, mentre CacheOnly serve esclusivamente contenuti precaricati. Utilizzi queste strategie per richieste POST non memorizzabili nella cache o per risorse rigorosamente precaricate.
L'array runtimeCaching
Nella configurazione di Workbox, runtimeCaching è un array di regole. Ogni regola confronta gli URL delle richieste e assegna una strategia e un nome alla cache.
VitePWA({
workbox: {
runtimeCaching: [ /* rules */ ]
}
});Una regola urlPattern
Ogni regola contiene un urlPattern (espressione regolare o funzione), un handler (il nome della strategia) e delle options, ad esempio il nome della cache.
{
urlPattern: /\/api\//,
handler: "NetworkFirst",
options: { cacheName: "api-cache" }
}Memorizzare nella cache le risorse statiche con CacheFirst
Faccia corrispondere immagini e font e li serva con CacheFirst, poiché i relativi URL con hash del contenuto cambiano quando cambia il file.
{
urlPattern: /\.(?:png|jpg|svg|woff2)$/,
handler: "CacheFirst",
options: { cacheName: "static-assets" }
}Memorizzare nella cache i bundle JS con StaleWhileRevalidate
Serva immediatamente dalla cache i bundle di script e stili mentre li aggiorna in background.
{
urlPattern: /\.(?:js|css)$/,
handler: "StaleWhileRevalidate",
options: { cacheName: "assets" }
}Il plugin di scadenza
Senza limiti, le cache crescono indefinitamente. L'opzione expiration limita il numero di voci e la loro durata massima, rimuovendo prima quelle più vecchie.
options: {
cacheName: "api-cache",
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24
}
}Memorizzare nella cache le risposte opache
Per le risposte di API cross-origin, spesso si aggiunge cacheableResponse con gli status consentiti, in modo da memorizzare solo le risposte riuscite.
options: {
cacheableResponse: { statuses: [0, 200] }
}Verifica rapida
Quale strategia è più adatta alle risposte delle API che devono essere aggiornate ma disponibili offline?
Riepilogo
Le strategie di Workbox corrispondono ai tipi di risorsa: CacheFirst per le risorse statiche, NetworkFirst per le risposte delle API e StaleWhileRevalidate per i bundle JS/CSS. Le definisca nell'array runtimeCaching con un urlPattern, un handler e delle options, come il plugin expiration, per limitare le dimensioni della cache.
Domande Frequenti
La lezione «Strategie per i service worker» è gratuita?
Sì — il testo completo di «Strategie per i service worker» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Strategie per i service worker»?
Cache-first, network-first, stale-while-revalidate — scelta in base al tipo di risorsa. Eserciti Vue 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 Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue 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 2 di 4.
Quanto tempo richiede la lezione «Strategie per i service worker»?
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 Vue Academy?
Sì. Ogni lezione Vue 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
- Configurazione di vite-plugin-pwa
- Strategie per i service worker
- Supporto offline e sincronizzazione in background
- Notifiche push in una PWA Vue