yukaty

Posted on Nov 19

PWA Quick Guide: Make Your React App Installable

#webdev #beginners #tutorial #react

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 Favicon.io or PWA Asset Generator.

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:

Open in Chrome
Look for install icon in address bar
Open Chrome DevTools (F12) → Application tab → Service Workers to verify registration

Test offline mode:

Install the app
In Chrome DevTools → Network tab, check "Offline"
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:

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

Happy coding ❤️

DEV Community