Registrare un Service Worker
Installi e attivi un service worker.
Registrare un Service Worker è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cos'è un service worker?
Un service worker è uno script eseguito dal browser in background, separatamente dalla pagina. Funziona come un proxy di rete programmabile: può intercettare le richieste, fornire risposte memorizzate nella cache e abilitare esperienze offline.
Rilevamento delle funzionalità
Non tutti gli ambienti supportano i service worker. Verifichi la presenza di navigator.serviceWorker prima di effettuare la registrazione, così i browser meno recenti possono funzionare comunque in modo appropriato.
if ('serviceWorker' in navigator) {
// safe to register
}Registrazione
Registri un service worker passando l'URL del suo script a navigator.serviceWorker.register. Il metodo restituisce una Promise che si risolve nell'oggetto di registrazione.
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));Ambito di registrazione
L'ambito è l'insieme degli URL controllati dal worker. Per impostazione predefinita, coincide con la directory in cui si trova lo script. Un worker in /sw.js controlla l'intero sito; uno in /app/sw.js controlla solo /app/.
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.Impostare un ambito esplicito
Può restringere l'ambito con un'opzione, ma non può estenderlo oltre la directory dello script, a meno che sul server non sia impostata un'intestazione speciale.
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});Requisito HTTPS
I service worker richiedono un contesto sicuro: in produzione, HTTPS. localhost viene considerato sicuro durante lo sviluppo. Questo impedisce agli aggressori di dirottare il proxy di rete.
L'evento install
La prima volta che un worker viene registrato, esegue il suo evento install. In genere è qui che si memorizzano preventivamente nella cache le risorse essenziali, affinché l'applicazione funzioni offline.
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});L'evento activate
Dopo l'installazione, il worker attiva activate. È il momento adatto per ripulire le cache obsolete delle versioni precedenti, prima che inizi a controllare le pagine.
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});Il ciclo di vita
Un service worker attraversa diversi stati:
- installing — esecuzione del gestore install
- installed/waiting — pronto e in attesa di subentrare
- activating / activated — ora controlla le pagine
Per impostazione predefinita, un nuovo worker attende che le pagine precedenti vengano chiuse prima di attivarsi.
Intercettare le richieste
Una volta attivo, il worker riceve ogni richiesta di rete proveniente dal proprio ambito tramite l'evento fetch. Può rispondere dalla cache, dalla rete o combinando entrambe.
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});Riepilogo della registrazione
Per registrare un service worker: rilevi la funzionalità, chiami register con l'URL di uno script, consideri l'ambito e il requisito HTTPS e gestisca gli eventi install, activate e fetch all'interno dello script del worker.
Verifica rapida
Metta alla prova la Sua comprensione della registrazione di un service worker.
Riepilogo
Ha imparato a registrare un service worker:
- Rilevi la funzionalità con
'serviceWorker' in navigator. register(url, { scope })restituisce una Promise.- L'ambito predefinito è la directory dello script; HTTPS è obbligatorio.
- Gestisca
install,activateefetchnel worker.
Ora vediamo la Cache API.
Domande Frequenti
La lezione «Registrare un Service Worker» è gratuita?
Sì — il testo completo di «Registrare un 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Registrare un Service Worker»?
Installi e attivi un service worker. 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 1 di 4.
Quanto tempo richiede la lezione «Registrare un 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 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