React as a PWA

The Web App Manifest

manifest.json is a JSON file describing your app's name, icons, theme color, and how it should look when installed (like fullscreen or standalone). Browsers use this file to decide whether to offer 'Add to Home Screen' and how the installed app should appear.

Note: Provide icons in multiple sizes (like 192x192 and 512x512) since different devices/contexts request different icon resolutions.

Warning: Without a valid manifest.json linked from your HTML, most browsers won't offer the install/'Add to Home Screen' prompt at all.

Example: manifest.json Content

$ cat public/manifest.json
{
  "short_name": "MyApp",
  "name": "My React App",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Adding a Service Worker for Offline Support

A service worker is a script that runs separately from your page, able to intercept network requests and serve cached responses when the network is unavailable. This is what enables an app to keep working (at least partially) offline, a defining feature of a true PWA.

Note: Vite's official PWA plugin (vite-plugin-pwa) generates and registers a working service worker for you, rather than writing the caching logic by hand.

Warning: A misconfigured service worker can accidentally serve STALE cached content even after you've deployed real updates — cache invalidation needs careful handling.

Example: Adding a Service Worker for Offline Support

// Run in your local React project (npm install required)
// vite.config.js (using vite-plugin-pwa)
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [VitePWA({ registerType: 'autoUpdate' })],
};

Testing PWA Behavior

Chrome DevTools' Application tab lets you inspect the registered service worker, simulate offline mode, and verify the manifest is correctly recognized — essential for confirming your PWA setup actually works before relying on it in production.

Note: Use the Offline checkbox in DevTools' Network tab to simulate a lost connection and verify your app still shows something useful, not a browser error page.

Warning: Testing only with a real, working connection can hide bugs in your offline fallback behavior that only show up once the network actually drops.