# React Router v7で作成したウェブアプリをPWA(インストールに対応のみ)にする
3 min read
Table of Contents
⚠️追記：vite-plugin-pwaはとReact Router v7で正常に機能しません
…
React Router v7でウェブアプリを作成した。
Kindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った
これを少しずつ改良しているんだけど、サイトに訪問するのが面倒なのでPWAにすることにした。
環境
PWAにしたアプリの環境は下記の通り。
{ "react-router": "^7.1.5", "react": "^19.0.0", "vite": "^5.4.11",}"volta": { "node": "23.8.0", "npm": "10.9.2"}PWAにする
vite-plugin-pwaをインストールする。
npm install -D vite-plugin-pwavite.config.tsのpluginsにvite-plugin-pwaを追加する。
plugins: [ ... VitePWA({ registerType: "autoUpdate", // サービスワーカーを自動的に更新する設定 manifest: { name: "アプリ名", short_name: "短縮名", description: "アプリの説明", theme_color: "#ffffff", background_color: "#ffffff", display: "standalone", orientation: "portrait", start_url: "/", icons: [ { src: "/icons/icon-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/icons/icon-512x512.png", sizes: "512x512", type: "image/png", }, ], screenshots: [ { src: "screenshots/screenshot1.png", sizes: "640x480", type: "image/png" }, { src: "screenshots/screenshot2.png", sizes: "640x480", type: "image/png" } ] }, }), ],上記の記述でビルド時にmanifest.webmanifestが生成されるのでそれをapp/root.tsxで読み込む。
で、必要となる下記を作成する。
public/icons/icon-192x192.pngpublic/icons/icon-512x512.pngpublic/screenshots/screenshot1.pngpublic/screenshots/screenshot2.pngテストする
PWAは開発環境でテストできないので、npm run buildでビルドしたデータを起動して確認する。で、無事にインストールできることを確認した。
PWAのすべては享受できていないけど、インストールするのが目的なので達成した。
vite-plugin-pwaはとReact Router v7で正常に機能しません
今回pwa化する過程で
{ rel: "manifest", href: "/manifest.webmanifest" }をroot.tsxに追加している。
vite-plugin-pwaが正常に機能していればそこも自動でやってくれる。
オフラインのキャッシュも動いていないし、ただmanifest.webmanifestを自動で作ってくれるという機能しか使えてない。
実際にissueもあった。
