Registrare un Service Worker dall’HTML

Un service worker è un file JavaScript eseguito in background, separato da qualsiasi pagina, che intercetta le richieste di rete per il proprio ambito. Abilita il supporto offline, le notifiche push, la sincronizzazione in background e caricamenti ripetuti più rapidi tramite la memorizzazione nella cache.

Registri il worker dallo script della pagina: navigator.serviceWorker.register("/sw.js"). Il browser recupera /sw.js, lo analizza, esegue il relativo evento install e inizia a intercettare le richieste per l'ambito della registrazione.

I browser meno recenti non supportano i service worker. Verifichi sempre la disponibilità della funzionalità con "serviceWorker" in navigator prima di chiamare register; in caso contrario la chiamata genera un'eccezione nei browser che non dispongono dell'API. Il polyfilling non è praticabile: i service worker non possono essere riprodotti tramite polyfill perché richiedono l'integrazione a livello di browser.

L'ambito è il prefisso del percorso controllato dal worker. Per impostazione predefinita, l'ambito corrisponde alla directory del file del worker: /sw.js controlla tutti gli URL sotto /. Per registrare un worker con un ambito più profondo da una posizione diversa, imposti l'opzione scope e fornisca anche l'header Service-Worker-Allowed.

Posizioni sw.js nella radice dell'applicazione (/sw.js), così il suo ambito predefinito copre l'intero sito. I percorsi più profondi, come /app/sw.js, limitano l'ambito a /app/ e alle relative sottocartelle, cosa che raramente è desiderabile.

Registri il worker dopo il caricamento della pagina, per evitare di competere per la larghezza di banda durante il rendering critico: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Le funzionalità PWA diventano operative nelle visite successive senza ritardare la prima visita.

Il browser controlla automaticamente se sw.js è stato aggiornato, in genere ogni 24 ore e durante la maggior parte dei caricamenti di pagina. Se il contenuto del file è cambiato, il nuovo worker viene scaricato, installato e rimane nello stato "waiting" finché tutte le schede esistenti non vengono chiuse; quindi si attiva.

registration.update() avvia manualmente un controllo degli aggiornamenti. self.skipWaiting() all'interno del nuovo sw.js lo attiva immediatamente senza attendere la chiusura delle schede. Combini i due approcci per ottenere un comportamento che utilizza sempre il worker più recente, accettando però nuovi recuperi di dati durante la sessione.

registration.unregister() rimuove il worker. È utile durante lo sviluppo se un worker difettoso causa problemi al sito. In Chrome DevTools, Application → Service Workers offre un pulsante "Unregister" per lo stesso scopo durante il debug.

La registrazione di un worker tramite HTTP, senza HTTPS, non va a buon fine senza segnalazioni: i service worker richiedono un'origine sicura, cioè HTTPS o localhost durante lo sviluppo. Se la registrazione non ha effetto, controlli nella console il messaggio "An SSL certificate error occurred".

Il worker non ha accesso al DOM. Per passare messaggi, utilizzi navigator.serviceWorker.controller.postMessage() nella pagina e self.addEventListener("message", handler) nel worker, e viceversa. È utile per l'invalidazione della cache, i controlli della versione e gli eventi personalizzati.

Durante la prima visita, il worker viene installato e inizia a controllare le pagine solo dopo il ricaricamento della pagina. Per controllare immediatamente la prima navigazione, chiami self.clients.claim() nell'evento activate: è utile per le app offline-first.

Perché i service worker devono essere forniti tramite HTTPS o localhost?

Registri i service worker dal JavaScript della pagina con navigator.serviceWorker.register("/sw.js") dopo aver rilevato il supporto. Posizioni sw.js nella radice dell'applicazione per ottenere l'ambito completo. Effettui la registrazione al caricamento per evitare di competere con il rendering critico. Gli aggiornamenti vengono controllati automaticamente a intervalli regolari; per forzarli utilizzi registration.update o skipWaiting. HTTPS è necessario per impedire l'iniezione di worker dannosi.