What are Service Workers and PWA in React?

Question

Accepted Answer

**Service Worker** is a script that runs in the **browser background thread** and intercepts network requests. **PWA (Progressive Web App)** is a web application that works like a native app (offline, push notifications, desktop installation).

**Why it matters:** PWAs bridge the gap between web and native apps. Companies like Twitter, Pinterest, and Starbucks use PWAs to reach users on slow networks or low-storage devices without requiring app store downloads. A well-configured PWA can load instantly on repeat visits and work fully offline.

**What Service Worker provides:**
- **Caching** — static resources work without internet.
- **Offline-first** — app functions offline.
- **Push notifications** — messages to the user.
- **Background sync** — sending data when network appears.

**How a Service Worker lifecycle works:**
1. **Registration** — the browser registers the SW script.
2. **Installation** — the SW installs and pre-caches critical assets.
3. **Activation** — old SW is replaced, old caches are cleaned up.
4. **Fetching** — the SW intercepts network requests and serves from cache or network.

**Setup in React (Create React App):**
```bash
npm install -D workbox-webpack-plugin
```

```js
// src/service-worker.js
import { precacheAndRoute } from "workbox-precaching";
import { registerRoute } from "workbox-routing";
import { StaleWhileRevalidate, CacheFirst } from "workbox-strategies";

// Cache built files
precacheAndRoute(self.__WB_MANIFEST);

// Cache API requests
registerRoute(
  ({ url }) => url.pathname.startsWith("/api/"),
  new StaleWhileRevalidate({ cacheName: "api-cache" })
);

// Cache images
registerRoute(
  ({ request }) => request.destination === "image",
  new CacheFirst({ cacheName: "images" })
);
```

**Manifest (manifest.json):**
```json
{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}
```

**Common pitfalls:**
- Forgetting to update the SW when deploying new code — users see stale content.
- Over-caching API responses leads to stale data.
- Not testing in Airplane mode to verify offline behavior.

**Check:** Chrome DevTools → Application → Service Workers.

React: What are Service Workers and PWA in React?