How to Setup PWA(Progressive Web App) in vite react app

A PWA (Progressive Web App) is a web app that uses modern web technologies to deliver a user experience similar to that of a native app. PWAs are designed to be fast, reliable, and engaging, and can be installed on the user's device like a native app.

To set up a PWA (Progressive Web App) in a Vite React app, you will need to follow these steps:

1. Install the vite-plugin-pwa package by running the following command:

npm install vite-plugin-pwa

1. Create a pwa.config.js file in the root of your project, and add the following code to it:

module.exports = {
  name: 'My App', // The name of your app
  short_name: 'MyApp', // The short name of your app
  theme_color: '#fff', // The theme color of your app
  background_color: '#fff', // The background color of your app
  display: 'standalone', // The display mode of your app
  scope: '/', // The scope of your app
  start_url: '/', // The start URL of your app
  icons: [
    {
      src: './icon.png', // The path to your app icon
      sizes: [96, 128, 192, 256, 384, 512], // The sizes of your app icon
    },
  ],
}

1. Import the createPWA function from the vite-plugin-pwa package, and use it to create a PWA plugin for your Vite app. Add the following code to your src/vite.config.js file:

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

const pwaPlugin = createPWA({
  config: require('./pwa.config.js'),
})

export default {
  // Your other Vite config options...
  plugins: [pwaPlugin],
}

1. Build your Vite app using the vite build command. This will generate the necessary files for your PWA, including the manifest.json file and the icon files.

2. Serve your Vite app using a web server, such as serve. This will allow you to test your PWA and see if it works as expected.

After completing these steps, your Vite React app should be set up as a PWA. You can test it by visiting your app in a web browser and checking if it meets the criteria for a PWA, such as being installable, offline-capable, and responsive.

For more information refer official documentation