vite pwa pluginでreact router v7がpwaにできない理由を調べてみた

- React Router v7で作成したウェブアプリをPWA(インストールに対応のみ)にする - ローカルのvite-plugin-pwaを、手元のReact Router v7プロジェクトで直接利用する方法 過去にreact router v7がvite-pwa-pluginでpwa化できないと言うことを言ってきた。 実際のIssueはFeature Request: Vite PWA Support for React Router 7 #809←こちら。 問題の現象 まず起きている事象としては、 - manifestの作成はできているけど、 - index.htmlにスクリプトの挿入がされない pwaの機能が使えないとかそう言う次元ではなく、そもそもvite-pwa-pluginをそのまま使おうとするとpwaにすらならない。 manifestは生成されているのでroot.tsxに を追加すればpwa化はできるが、vite-pwa-pluginの使い方ではない。 実際にコードを動かしてデバックする方法はこちら 原因の調査 まずはなんでindex.htmlでmanifestが読み込まれないかを実際にコードを読んで理解を試みた。 これがvite-pw-pluginを構成する関数群。 で、コードを読んでいくと開発環境の場合は、DevPlugin(ctx),でscriptを挿入記述らしきものを見つけた。 - transformIndexHtml内でtransformIndexHtmlHandlerが呼び出される - transformIndexHtmlHandler内のhtml = injectServiceWorker(html, options, true)が実行される。 - headにmanifestが登録される仕組み つまりこれが発火していない。 関連するIssue で、いろいろ調べてみると Vite plugin transformIndexHtml does not work #12736 こんなissueを見つけた。 > The transformIndexHtml is never called. This means a whole set of vite plugins > will not work without any error message. > > I understand there's a good reason why this vite plugin method cannot work > with RR, but it should at least throw an error or warning to let the user know > the plugin they installed will not work at all. これに対し、 > This is related to #12352, since our plugin is overriding that subsequent > plugin and doesn't allow for options to be able to inject your own plugin > functionality into it. のように返信されている。 翻訳すると、 のようになる。 結論 つまりどうしようもない気がする。 vite-pwa-pluginの修正を待つのではなく、react-router側の話なのかもしれない。