manifest.json の id の罠！複数PWAで起きる重複禁止問題をハックする

PWAのmanifest.jsonには、idという項目があります。

最初にPWAを作るときは、name、start_url、display、iconsあたりに目が行きがちで、正直、idはなくても動くため「これ必要なん？」と思いやすいです。

しかし、同じドメインで複数のPWAを扱ったり、ユーザーごとにアプリを量産させたいと考えたとき、このidの仕様が開発者の前に巨大な壁として立ちはだかります。

今回は、PWA LABでの泥臭い実験の末にたどり着いた、ブラウザの「重複インストール禁止ガード」をたった11文字で粉砕する最強のハックをシェアします。

manifest.json の id とは何か

idは、そのPWAを識別するための値です。ブラウザが「これは前に入れたアプリと同じものか？それとも別のアプリか？」を判断するための名前札（一意な識別子）です。

ブラウザはこの値を見て、すでにインストールされているPWAの「上書き更新」なのか、まったく新しい「新規アプリ」なのかを判断しています。

教科書通りの「id固定」が引き起こす量産化の限界

公式ドキュメントや多くの技術ブログでは、次のように推奨されています。
「URLが後から変わってもアプリが分裂しないように、idには固定値（例: /lab）をしっかり書きましょう」

1つのサイトに1つのPWAしかない企業サイトなどでは、これで正解です。しかし、次のような構成で「URL（トークン）ごとに別々のアイコンとして、ホーム画面に何個も連続インストールさせたい」となった瞬間、このセオリーは牙を剥きます。

• /lab/?token=123：実験用PWA（ユーザーA用）
• /lab/?token=456：実験用PWA（ユーザーB用）
• /petal/@user1：Aさんの名刺ページアプリ
• /petal/@user2：Bさんの名刺ページアプリ

ここで真面目にidを固定してしまったり、あるいはidを/lab/app/トークンのように動的に書き換えても、裏で動いているService WorkerのURLが同じである場合、Chromeの強力なセンサーが「大元が同じだから同一アプリだ！」と見抜いてしまい、「もうインストールされています」と二重登録をブロックされてしまうのです。

解決策：すべてを解決した、たった11文字の超ウルトラC

Service Workerによる強力な「オフライン機能」を100%維持したまま、Chromeのガードを完璧にすり抜けて連続インストールを大成功させた魔法の設定がこちらです。

"start_url": "."

そして、マニフェストからidの項目をあえて完全に削除する（書かない）こと。これが最大の鍵です。

なぜこれで動くのか？奇跡のメカニズム

役割が違うはずのstart_urlとidですが、マニフェストにidが書かれていない場合、ブラウザは「start_urlの文字列をそのままアプリのID（身元）として代用する」という仕様を持っています。

ここに相対パスの"."（今いる場所）を指定すると、ブラウザの脳内でとんでもないマジックが起きます。

• /lab/?token=123 で開いた時 ➔ ブラウザが自動でIDを/lab/?token=123に変換。➔「新規アプリAだ！」
• /lab/?token=456 で開いた時 ➔ ブラウザが自動でIDを/lab/?token=456に変換。➔「新規アプリBだ！」

JSで複雑なID生成ロジックを書かなくても、ブラウザ自身が勝手にトークンをIDの一部として絶対パス化し、勝手に別アプリだと誤認して、ホーム画面にアイコンを無限に量産させてくれるようになります。

Service Workerとの完璧な共存（オフライン対応）

このハックが最も芸術的なのは、どれだけホーム画面にアプリが量産されても、それらの起動URLはすべて/lab/という共通のService Workerのスコープ（縄張り）の内部にカッチリ収まっている点です。

つまり、「インストールするときはブラウザを騙して無限にアイコンを作らせる」のに、「オフラインで起動したときは、共通のSWが完璧にキャッシュから画面を表示する」という、PWAの理想形が完成します。

Petalのような「人ごとの名刺アプリ」での実用性

デジタル名刺ツール「Petal」のように、ユーザーが「お気に入りの人の名刺ページへのショートカット」を何個もホーム画面にコレクションしてほしい設計において、この仕様の穴（ハック）は強力な武器になります。

企業が絶対にやらない「アプリの使い捨て・量産・配布」という逆張りの思想だからこそ、idを固定しない仕様が最高の結果を生み出しました。元々、Petalの前身である、好きなWebページを何個でも別アイコン化するツール『OJapp』でこの"start_url": "."を使っていた経験が、今回のLABでの大発見へと繋がりました。

まとめ

PWAの id は、通常はアプリの同一性を保つためのものですが、あえて書かずに start_url: "." と組み合わせることで、Android Chromeの重複判定のみをピンポイントでクラッシュさせることができます。

• 企業サイト（1つだけインストールさせたい） ➔ idを固定する（教科書通り）
• 名刺・ルーム・アカウント量産型ツール ➔ idは書かない、start_url: "."にする（勝者ハック）

教科書通りのセオリーを疑い、実機での泥臭い実験を繰り返すことで、PWAの新しい可能性をブチ抜くことができました。名刺アプリやルーム別ショートカットアプリを作る際は、ぜひこの11文字を試してみてください！