Progressive Web Apps — Cheat Sheet

Tag: pwa, service-worker, manifest, offline, cache-api, push-notifications, web

Livello: intermedio

TL;DR: Applicazioni web che usano Service Worker e Web App Manifest per offrire installazione, cache offline e background sync.

Concetti chiave

-

I tre pilastri PWA sono HTTPS obbligatorio, Web App Manifest e Service Worker.

-

Il Web App Manifest definisce metadati, icone, colori tema e modalita di visualizzazione standalone.

-

Il Service Worker e un programmable network proxy in background, separato dal thread DOM principale.

-

Il ciclo di vita del Service Worker comprende registration, installation, activation e fetch handling.

-

Cache Storage API memorizza coppie Request/Response per abilitare l'esecuzione offline.

-

Cache-First serve asset statici dalla cache e ricorre alla rete solo in cache miss.

-

Network-First tenta la rete per dati freschi e ricorre alla cache in caso di fallimento.

-

Stale-While-Revalidate restituisce subito la cache e aggiorna l'asset in background per la richiesta successiva.

-

Background Sync sincronizza mutazioni o invii form quando la connettività torna disponibile.

-

Push API e Notification API gestiscono ricezione payload e visualizzazione notifiche di sistema.

Domande tipiche e risposte pronte

-

Q: Come gestisci il ciclo di vita e l'aggiornamento di un Service Worker?R: Alla modifica byte-per-byte del file, il browser installa il nuovo worker in stato waiting; uso skipWaiting() e clients.claim() per attivarlo subito e notificare l'utente.

-

Q: Quale strategia di caching useresti per una dashboard con metriche real-time?R: Network-First con fallback su cache per le metriche critiche, affiancato da Cache-First o Stale-While-Revalidate per bundle JS e stili statici.

-

Q: Quali sono i requisiti minimi per mostrare il prompt nativo di installazione beforeinstallprompt?R: Servire il sito su HTTPS, registrare un Service Worker con handler fetch, avere un manifest valido con icone idonee e verificare il coinvolgimento utente.

Insidie e errori comuni

-

Usare percorsi errati nello scope del Service Worker, impedendogli di intercettare fetch di rotte genitore.

-

Mettere in cache HTTP rigida lo script del Service Worker stesso, bloccando gli aggiornamenti dell'applicazione.

-

Dimenticare di ripulire le cache obsolete durante la fase di activate, esaurendo lo storage del browser.

-

Dare per scontato il supporto push su iOS Safari, che richiede aggiunta manuale alla Home e permessi espliciti.

-

Bloccare operazioni lunghe senza IndexedDB, ignorando che LocalStorage e sincrono e non accessibile nei worker.

Snippet e comandiTypeScript

// Registrazione del Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const reg = await navigator.serviceWorker.register('/sw.js', { scope: '/' });
      console.log('SW registrato con scope:', reg.scope);
    } catch (err) {
      console.error('Registrazione SW fallita:', err);
    }
  });
}

TypeScript

// sw.ts: Strategia Stale-While-Revalidate
self.addEventListener('fetch', (event: FetchEvent) => {
  event.respondWith(
    caches.open('dynamic-cache-v1').then(async (cache) => {
      const cachedResponse = await cache.match(event.request);
      const networkFetch = fetch(event.request).then((networkResponse) => {
        if (networkResponse.status === 200) {
          cache.put(event.request, networkResponse.clone());
        }
        return networkResponse;
      });
      return cachedResponse || networkFetch;
    })
  );
});

JSON

{
  "short_name": "App",
  "name": "Progressive Web App",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "display": "standalone"
}

Da ripassare

-

[ ] Gestione eventi beforeinstallprompt e deferred prompt custom

-

[ ] Pattern di migrazione cache vecchie dentro l'evento activate

-

[ ] Integrazione di Workbox per routing e runtime caching

-

[x] Differenza architetturale tra Web Worker e Service Worker

-

[x] Ruolo del Web App Manifest per l'esperienza standalone

Jarvis Interviews
Jarvis