← Back to React Course | Chapter 14: Performance & Production Deployment | Lesson 7 of 13

React as a PWA

Turning a React app into a PWA is like giving a website a passport to also live on your home screen and work like a real app, even without internet.

In this page:

  1. The Web App Manifest
  2. Adding a Service Worker for Offline Support
  3. Testing PWA Behavior
Syntax
markup 
{
  "name": "App Name",
  "short_name": "Short",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }
  ]
}

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

bash 
$ 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"
}

⚠️ Run this in your own terminal or Node.js environment.

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

markup 
// 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' })],
};

⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.

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.
Related Topics

Image Optimization Techniques · Creating a Production Build · Analyzing Bundle Size · Environment Variables in React

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting the manifest.json file, which is what lets a browser offer 'Add to Home Screen' at all.
  2. Not testing offline behavior, assuming the service worker 'just works' without actually verifying cached content loads without a connection.
  3. Caching content too aggressively, causing users to see stale content long after a new deployment.
Chapter Summary
  • A Progressive Web App (PWA) is a web app that can be installed and behave more like a native app, including offline support.
  • A manifest.json file describes the app's name, icons, and display mode for installation.
  • A service worker is a background script that can cache assets and serve them even when offline.
  • Vite and Create React App both offer PWA plugins/templates to set most of this up automatically.
Browser Support

Service workers and installability supported in all modern browsers (notably limited support in older iOS Safari versions historically, though modern versions support much of it).

🔒

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson Image Optimization Techniques Next Lesson → Creating a Production Build

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.