PWA Quick Guide: Make Your React App Installable

Want to make your web app feel like a real mobile app? PWA (Progressive Web App) is the answer!

Prerequisites 📋

This guide is for React apps built with Vite. Some frameworks like Next.js and Gatsby have built-in PWA support, so choose what works best for your project.

What You'll Build 🧑‍💻

After following this guide, your React app will:

• Be installable on any device


• Work without internet


• Look and feel like a native app

Browser support notes

• Chrome/Edge/Firefox: Full PWA support


• Safari: Limited PWA support

Let's get started!

Step 1. Create a new React project

npm create vite@latest my-pwa-app

cd my-pwa-app

npm install

**Skip this step if you already have your app.

Step 2. Install the PWA package

npm install vite-plugin-pwa -D

💡 The vite-plugin-pwa plugin manages internally:

• Web App Manifest - defines how your app appears and behaves


• Service Worker - makes your app work offline

Step 3. Configure PWA

Update vite.config.js:

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import { VitePWA } from 'vite-plugin-pwa'



const manifestIcons = [

  {

    src: 'pwa-192.png',

    sizes: '192x192',

    type: 'image/png',

  },

  {

    src: 'pwa-512.png',

    sizes: '512x512',

    type: 'image/png',

  }

]



export default defineConfig({

  plugins: [

    react(),

    VitePWA({

      registerType: 'autoUpdate',

      manifest: {

        name: 'My Awesome App',

        short_name: 'PWA App',

        icons: manifestIcons,

      }

    })

  ]

})

Step 4. Add app icons

Create two icons and place them in your public folder:

• 192x192 pixels (name it pwa-192.png)


• 512x512 pixels (name it pwa-512.png)

Need help creating icons? Try .

Step 5. Test Your PWA

# Development mode

npm run dev         # http://localhost:5173



# Production mode

npm run build

npm run preview     # http://localhost:4173

💡Production mode is recommended for testing full PWA features.

Testing Checklist

Check installation:

1. Open in Chrome


2. Look for install icon in address bar


3. Open Chrome DevTools (F12) → Application tab → Service Workers to verify registration

Test offline mode:

1. Install the app


2. In Chrome DevTools → Network tab, check "Offline"


3. App should still work!

Troubleshooting

• No install icon? - Use production build


• Changes not showing? - Clear browser cache


• Double-check icon paths in the public folder

Next Steps 🐾

This is just the beginning - there's a lot more you can do with PWAs. Explore:

• Push notifications


• Offline data sync


• Custom install prompts

Resources:

• Google's PWA Training

That's it! Now you know how to create a Progressive Web App (PWA) 🥳

Happy coding ❤️