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-pwa

vite.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.png
public/icons/icon-512x512.png
public/screenshots/screenshot1.png
public/screenshots/screenshot2.png

テストする

PWAは開発環境でテストできないので、npm run buildでビルドしたデータを起動して確認する。で、無事にインストールできることを確認した。

PWAのすべては享受できていないけど、インストールするのが目的なので達成した。