過去に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に

 { rel: "manifest", href: "/manifest.webmanifest" }

を追加すればpwa化はできるが、vite-pwa-pluginの使い方ではない。

実際にコードを動かしてデバックする方法はこちら

原因の調査

まずはなんでindex.htmlでmanifestが読み込まれないかを実際にコードを読んで理解を試みた。

export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
  const ctx = createContext(userOptions);
  const api = createAPI(ctx);
  return [
    MainPlugin(ctx, api),
    InfoPlugin(ctx, api),
    BuildPlugin(ctx),
    DevPlugin(ctx),
    AssetsPlugin(ctx),
  ];
}

これが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側の話なのかもしれない。