Service Workers: Approfondimento

Service Workers: Approfondimento

I Service Worker sono la spina dorsale delle PWA e delle app offline-first. Comprendere il loro ciclo di vita e capacità è essenziale per costruire applicazioni web robuste.

Eventi Ciclo Vita

install: Cache asset statici (app shell). activate: Pulisce vecchie cache, claim clients. fetch: Intercetta richieste rete. message: Comunica con pagine. sync: Background sync. push: Push notification. periodicSync: Periodic background sync.

Strategie Caching in Dettaglio

Cache First: Controlla cache → ritorna se hit → fetch & cache se miss. Migliore per: Asset statici (JS, CSS, immagini, font). Network First: Fetch → cache & ritorna se ok → ritorna cache se fail. Migliore per: Chiamate API, contenuto dinamico. Stale While Revalidate: Ritorna cache immediatamente → fetch in background → aggiorna cache. Migliore per: Contenuto aggiornato frequentemente. Cache Only: Ritorna cache o fallisce. Network Only: Fetch o fallisce. Precaching: Caching tempo install di risorse critiche.

Pattern Workbox

workbox-precaching: Precaching basato su manifest con revisioning. workbox-routing: Matching route con strategie. workbox-strategies: Strategie built-in. workbox-expiration: Scadenza cache (maxEntries, maxAgeSeconds). workbox-background-sync: Accoda richieste fallite. workbox-broadcast-update: Notifica client aggiornamenti.

Pattern Avanzati

Race Network and Cache: Promise.race([cache, network]). Streaming: Stream cached shell + streamed content. Offline Fallback Page: offline.html personalizzato. Cache Warmth: Prefetch risorse probabili. Versioning: Nome cache include versione, pulizia su activate. Skip Waiting: self.skipWaiting(), clients.claim() per aggiornamenti istantanei.

Background Sync

Registra sync tag in pagina: navigator.serviceWorker.ready.then(reg => reg.sync.register('sync-tag')). In SW: self.addEventListener('sync', e => e.waitUntil(doSync())). Riprova automaticamente quando connettività ripristinata. Usa per: Invio form, analytics, mutazioni.

Periodic Background Sync

Richiede permesso periodic-background-sync. Registra: reg.periodicSync.register('tag', { minInterval: 24 * 60 * 60 * 1000 }). In SW: self.addEventListener('periodicsync', ...). Browser decide quando fire (euristiche engagement). Usa per: Aggiornamenti contenuto, refresh feed.

Push Notification Internals

VAPID (Voluntary Application Server Identification): Coppia chiavi pubblico/privato. Subscription: endpoint, p256dh (chiave pubblica ECDH), auth (auth secret). Server cripta payload con chiavi subscription. Web Push Protocol: POST a endpoint con TTL, urgency, topic. SW riceve evento push, mostra notifica.

Debugging e DevTools

Chrome DevTools → Application → Service Workers: Update on reload, bypass network, offline. Console: console.log in SW visibile in DevTools. Lighthouse PWA audit. Workbox: workbox-cli generateSW, injectManifest. Testing: Service Worker Mock (msw), jest-environment-jsdom.