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'
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)],
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