● 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'
import type { VitePWAOptions } 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 の plugins に以下を追加します

例: Vue3 の場合

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

● PWA に必要な2ファイルを自動生成する

npm run build

以下の2つのファイルが自動生成されます

files generated
  dist/sw.js
  dist/workbox-3625d7b0.js

● アプリの更新を検知する

https://qiita.com/satamame/items/36c6761d363ca3894824

● オプション一覧

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

参考 https://qiita.com/satamame/items/2af28e120676df9ab375