PWA with React

The modern React PWA path

With Vite and React, the recommended way to add PWA support is vite-plugin-pwa. It wraps Workbox under the hood, generates your service worker at build time, injects the web app manifest into your HTML, and exposes a small registration API you can call from your app code. Create React App, the older alternative, is now deprecated and should not be used for new projects.

This module covers five lessons that take you from an empty Vite + React project to a fully working PWA with an update prompt and React-specific integration patterns.

Module coverage

Lesson	Topic
1	PWA with React — Overview (this page)
2	Setting Up vite-plugin-pwa
3	Manifest and Icons
4	Update Prompt UI
5	React Patterns for PWAs

Build, service worker, and update flow

flowchart LR
  A["Vite Build"] --> B["dist/"]
  B --> C["SW registered"]
  C --> D["SW activated"]
  D --> E["Update check"]
  E --> F["New SW waiting"]
  F --> G["User prompted"]
  G --> H["Reload"]

Vite build, service worker, and update flow