React Router v7で作成したウェブアプリをPWA(インストールに対応のみ)にする

⚠️追記：vite-plugin-pwaはとReact Router v7で正常に機能しません ... React Router v7でウェブアプリを作成した。 Kindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った これを少しずつ改良しているんだけど、サイトに訪問するのが面倒なのでPWAにすることにした。 環境 PWAにしたアプリの環境は下記の通り。 PWAにする vite-plugin-pwaをインストールする。 vite.config.tsのpluginsにvite-plugin-pwaを追加する。 上記の記述でビルド時にmanifest.webmanifestが生成されるのでそれをapp/root.tsxで読み込む。 で、必要となる下記を作成する。 テストする PWAは開発環境でテストできないので、npm run buildでビルドしたデータを起動して確認する。で、無事にインストールできることを確認した。 PWAのすべては享受できていないけど、インストールするのが目的なので達成した。 vite-plugin-pwaはとReact Router v7で正常に機能しません 今回pwa化する過程で をroot.tsxに追加している。 vite-plugin-pwaが正常に機能していればそこも自動でやってくれる。 オフラインのキャッシュも動いていないし、ただmanifest.webmanifestを自動で作ってくれるという機能しか使えてない。 実際にissueもあった。 Feature Request: Vite PWA Support for React Router 7