How do Service Workers enable Progressive Web Apps (PWAs)?

Service Worker: Proxy between app and network

// sw.js — Cache-first strategy
self.addEventListener("fetch", (e) => {
  e.respondWith(caches.match(e.request).then(cached => cached || fetch(e.request)));
});

// Install: precache critical assets
self.addEventListener("install", (e) => {
  e.waitUntil(caches.open("v1").then(cache => cache.addAll(["/", "/styles.css", "/app.js"])));
});

PWA Requirements

1. HTTPS
2. Service Worker
3. Web App Manifest (manifest.json)

FeatureWithout SWWith SW

Offline❌ Blank page✅ Cached content
Install❌ Bookmark only✅ Home screen icon
Push notifications❌✅
Background sync❌✅