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