Progressive Web Apps (PWA): Esperienze Web Native-Like

Progressive Web Apps (PWA): Esperienze Web Native-Like

Le PWA combinano il meglio di web e app native: installabili, offline-capable, veloci e coinvolgenti. Costruite sui principi di progressive enhancement.

Requisiti Fondamentali

HTTPS (richiesto per Service Worker). Web App Manifest (manifest.json): name, short_name, icone (192px, 512px), start_url, display (standalone, fullscreen), theme_color, background_color. Service Worker: Registrato, fetch handler per offline. Responsive design. Caricamento veloce (Core Web Vitals).

Service Worker

Proxy JavaScript tra browser e rete. Ciclo vita: Install → Activate → Fetch. Strategie caching: Cache First (asset statici), Network First (API), Stale While Revalidate (bilanciato), Network Only, Cache Only. Workbox: Libreria Google per generazione SW. Background Sync: Rimanda azioni finché online. Periodic Background Sync: Aggiorna contenuti periodicamente.

Architettura Offline-First

Modello app shell: Cache shell HTML/CSS/JS minima. Contenuto caricato dinamicamente. IndexedDB per dati strutturati offline. OPFS (Origin Private File System) per file. Risoluzione conflitti: Last-write-wins, operational transforms, CRDT. Accoda mutazioni per sync quando online.

Push Notification

Web Push Protocol (RFC 8030). Chiavi VAPID per auth server. Evento push Service Worker. Notification API per display. UX prompt permesso critico. Crittografia payload. Topic per deduplicazione. Badge, icon, actions, vibration.

Installazione e Distribuzione App Store

Evento beforeinstallprompt (Chrome/Edge). Pulsante installazione personalizzato. App shortcuts in manifest. TWA (Trusted Web Activity): Pacchettizza PWA per Play Store (Bubblewrap, PWABuilder). iOS: Solo Add to Home Screen, niente store distribution. Microsoft Store: PWABuilder. Meta Quest: WebXR PWA.

Framework e Tool PWA

Workbox: Generazione SW (Webpack, Vite, CLI). Vite PWA Plugin: Zero-config. Next.js: next-pwa. PWABuilder: Tool Microsoft per packaging, store submission. Lighthouse: Audit PWA. webhint: Linting.

Capabilità Avanzate

File System Access API: Leggi/scrivi file locali. Web Share API: Native share sheet. Contact Picker API: Seleziona contatti. Badging API: Badge icona app. Window Controls Overlay: Title bar custom. Launch Handler: Controlla avvio. Background Fetch: Download grandi.

Limitazioni iOS/Safari

Niente push notification (fino a iOS 16.4+ con limitazioni). Niente background sync. Niente periodic background sync. Limite cache 50MB (può essere svuotata). Niente equivalente TWA. Scope registrazione Service Worker limitato. 'Add to Home Screen' unico metodo installazione.