Add PWA to Vite project

Question

I want to have PWA for my project, I create a vite sample project with react and add vite-plugin-pwa version 17.5

I use these lines for vite.config.ts, but when I deploy the website and open it in Safari and Add to Home Screen, it opens like a normal website not PWA.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({ registerType: 'autoUpdate' })
  ],
})

Answer 1

You need to add manifest object inside VitePWA() in vite.config file. Here's the link for detailed tutorial I found: https://www.youtube.com/watch?v=2tP4tMCoSV0