Add Progressive Web App Support to Your Site with Claude

Turning your web app into a PWA means adding a manifest, a service worker, and offline caching — all boilerplate that Claude can generate perfectly the first time.

Add PWA support to this project. Generate:
1. A web app manifest with proper icons, theme colour, and display mode
2. A service worker with a cache-first strategy for static assets
   and network-first for API calls
3. The registration script in the main entry point
4. Update the HTML head with the manifest link and meta tags
Use Workbox for the service worker to keep it maintainable.

Claude will produce a production-ready service worker with sensible caching strategies:

// sw.js (using Workbox)
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

// Cache static assets aggressively
registerRoute(
  ({ request }) => request.destination === 'image' || request.destination === 'style',
  new CacheFirst({ cacheName: 'static-assets', /* expiration config */ })
);

// API calls go network-first with fallback
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api-responses' })
);

Don't forget to ask Claude to generate multiple icon sizes from your source logo and add the Apple-specific meta tags most tutorials miss.

PWAs are table stakes in 2026 — let Claude handle the service worker plumbing so you can focus on the actual app.