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

Question

"We want our app to work offline and be installable. How do Service Workers make this possible?"

Interview OS Community · Accepted Answer

## Service Worker: Proxy between app and network

```javascript
// 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`)

| Feature | Without SW | With SW |
|---------|-----------|---------|
| Offline | ❌ Blank page | ✅ Cached content |
| Install | ❌ Bookmark only | ✅ Home screen icon |
| Push notifications | ❌ | ✅ |
| Background sync | ❌ | ✅ |

Interview OS

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

Question Details

Suggested Solution

Service Worker: Proxy between app and network

PWA Requirements

Discussion (0)

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