Progressive Web Apps

Three pillars of a PWA: 1. Service Worker proxy between browser and network, enables offline + caching 2. Web App Manifest defines how the app appears when installed 3. HTTPS required for service workers and security

// public/manifest.json
{
  "name": "My App",
  "short_name": "MyApp",
  "description": "An awesome PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6200ee",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

<!-- Link manifest in <head> -->
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#6200ee" />
<meta name="apple-mobile-web-app-capable" content="yes" />

// service-worker.js
const CACHE = 'app-v1';
const PRECACHE = ['/', '/app.js', '/styles.css', '/offline.html'];

// Install precache critical assets self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE).then(cache => cache.addAll(PRECACHE)) ); self.skipWaiting(); });

// Activate clean old caches self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k))) ) ); self.clients.claim(); });

// Fetch stale-while-revalidate strategy self.addEventListener('fetch', event => { if (!event.request.url.startsWith('http')) return; event.respondWith( caches.match(event.request).then(cached => { const networkFetch = fetch(event.request).then(res => { caches.open(CACHE).then(cache => cache.put(event.request, res.clone())); return res; }); return cached || networkFetch; }) ); });

// Register service worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); } ```