Registrazione e ciclo di vita del Service Worker
Registrare uno script Service Worker, comprendere gli eventi del ciclo di vita install, activate e fetch e usare skipWaiting e clients.claim
Registrazione e ciclo di vita del Service Worker è una lezione Frontend 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos'è un Service Worker?
Un Service Worker è un file JavaScript che viene eseguito in un worker separato del browser (non nel thread principale) e intercetta le richieste di rete per la vostra origine. È il motore delle PWA offline, delle notifiche push e della sincronizzazione in background.
Registrare un Service Worker
Registratelo dallo script principale. I service worker richiedono HTTPS, tranne che su localhost.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}Ambito
Un service worker controlla le richieste all'interno del proprio ambito (la directory da cui viene servito). /sw.js nella root controlla tutto. Un SW in /app/sw.js controlla solo /app/*.
Ciclo di vita: install → activate → fetch
I tre eventi fondamentali sono: install (una sola volta, configura le cache), activate (una sola volta, elimina le cache obsolete) e fetch (a ogni richiesta, decide se usare la cache o la rete).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
Per impostazione predefinita, un SW aggiornato attende la chiusura di tutte le schede prima di attivarsi. self.skipWaiting() nel gestore install forza l'attivazione immediata: gli aggiornamenti sono più rapidi, ma si rischia di mescolare asset vecchi e nuovi.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
Dopo l'attivazione, un nuovo SW non controlla le pagine caricate prima di essa. self.clients.claim() nel gestore activate assume immediatamente il controllo.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Aggiornare il Service Worker
I browser verificano la presenza di un nuovo sw.js a ogni navigazione (età massima della cache: 24 ore). Se il contenuto del file è cambiato (anche solo a livello di byte), viene installato un nuovo SW, che attende di essere attivato. Ricaricate la pagina per attivare il nuovo SW.
Rilevare gli aggiornamenti dall'app
Ascoltate updatefound per mostrare un prompt di aggiornamento.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Annullare la registrazione
Per fermare un service worker fuori controllo (a causa di un problema durante lo sviluppo), annullatene la registrazione.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});DevTools del browser
Chrome DevTools → Application → Service Workers mostra gli SW registrati, consente di annullarne la registrazione, simulare l'opzione Update on reload e seguire gli eventi del ciclo di vita.
Problemi comuni
1) Il file SW deve trovarsi nell'ambito della root o a un livello superiore. 2) È richiesto HTTPS. 3) Durante lo sviluppo, le modifiche al SW richiedono un ricaricamento completo. 4) Mettete in cache una volta e aggiornate tramite versioning, senza far crescere la cache all'infinito. 5) Non mettete in cache le richieste POST (non sono supportate).
Workbox: la libreria per la produttività
Workbox di Google astrae il ciclo di vita e fornisce strategie di caching pronte all'uso. La maggior parte delle PWA in produzione usa Workbox invece di codice SW scritto manualmente.
Verifica rapida
Che cosa fa self.skipWaiting() nel gestore install di un service worker?
Riepilogo: ciclo di vita del Service Worker
Worker JavaScript che intercetta le richieste di rete per la vostra origine. Registratelo tramite navigator.serviceWorker.register. Ciclo di vita: install (configura le cache), activate (elimina quelle obsolete), fetch (intercetta le richieste). skipWaiting + clients.claim consentono aggiornamenti immediati. Ascoltate updatefound per invitare gli utenti ad aggiornare. Workbox astrae il codice ripetitivo. HTTPS è richiesto, tranne che su localhost.
Domande Frequenti
La lezione «Registrazione e ciclo di vita del Service Worker» è gratuita?
Sì — il testo completo di «Registrazione e ciclo di vita del 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Registrazione e ciclo di vita del Service Worker»?
Registrare uno script Service Worker, comprendere gli eventi del ciclo di vita install, activate e fetch e usare skipWaiting e clients.claim 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 2 di 4.
Quanto tempo richiede la lezione «Registrazione e ciclo di vita del 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 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