https://github.com/vite-pwa/vite-plugin-pwa
(Reactに 限りません。viteの プラグインなので、Vueなどviteを使用しているアプリで使えます)
npm i vite-plugin-pwa -D
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