React Progressive Web App (PWA)

What it does

Provides step-by-step guidance and scripts to convert or create React + Vite applications into Progressive Web Apps. Covers manifest generation, vite-plugin-pwa configuration, service worker strategies (generateSW vs injectManifest), offline fallback pages, install prompts, push subscriptions, and caching strategies tailored for assets and API responses. Includes example components, hooks, and Deno helper scripts for generating icons and manifests.

When to use it

Use this skill when a user asks to create or convert a React app into an installable/offline-capable PWA, to add service workers, configure workbox runtime caching, implement install/update UX, or enable push notifications. Not intended for server-rendered frameworks (prefer next-pwa for Next.js) or very small static sites without offline needs.

What's included

• Scripts: generate-manifest.ts, generate-icons.ts, generate-sw-config.ts, audit-pwa.ts (deno scripts)
• References: detailed docs on caching strategies, push notifications, testing PWAs
• Instructions: Quick-start steps, full Vite config examples, service worker caching samples, offline fallback and install button components, push subscription flows, and common troubleshooting advice.

Compatible agents

This is implementation and development guidance for developer-focused agents with code execution or CLI capabilities (Copilot/Codex/Claude Code/Code-capable assistants) and assumes Node/Deno/CLI access.