● vite-plugin-pwa

https://github.com/vite-pwa/vite-plugin-pwa
（Reactに 限りません。viteの プラグインなので、Vueなどviteを使用しているアプリで使えます）

● vite-plugin-pwa のインストール

npm i vite-plugin-pwa -D 

● vite-plugin-pwa を読み込む

vite.config.ts

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

const pwaOptions: Partial<VitePWAOptions> = {
  manifestFilename: "manifest.webmanifest.json",
  minify: true,
  registerType: "autoUpdate",
  manifest: {
    lang: "ja",
    name: "MY APP",
    short_name: "MyApp",
    scope: "/",
    start_url: "/",
    display: "standalone",
    orientation: "portrait",
    background_color: "#fff",
    theme_color: "#fff",
    icons: [
      {
        src: "icon.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  },
};

vite.config.ts

例: Vue3 の場合

export default defineConfig({
  // VitePWA を追加する
  plugins: [vue(), VitePWA(pwaOptions)],

● オプション一覧

https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/types.ts