Webアプリマニフェストの役割
Webアプリマニフェストは、WebサイトをPWA(Progressive Web App)としてホーム画面に追加するための設定をまとめたJSONファイルです。アプリ名、アイコン、表示モード、テーマカラーなどを定義します。
ブラウザはこのマニフェストと、HTTPS配信・Service Workerの有無・必須項目の充足などの条件をすべて満たしたときに、インストール可能と判断します。どれか一つでも欠けるとインストールの導線が出ません。
つまり「アイコンが出ない」原因は、マニフェストの記述ミスだけでなく、配信条件や周辺要件にまたがっていることが多いのです。
読み込まれない典型パターン
まず多いのが、HTMLの head に link rel="manifest" の記述がない、またはパスが間違っているケースです。相対パスの解決ミスでmanifest.jsonに辿り着けていないと、ブラウザは設定を読み込めません。
次に、manifest.json自体のJSONが壊れている(末尾カンマや構文エラー)場合も読み込みに失敗します。開発者ツールで内容がパースできているか確認するのが近道です。
アイコンのサイズ不足もよくある原因です。インストールには十分な解像度のアイコンが必要で、小さい画像しか指定していないとインストール条件を満たせません。
症状別チェック表
Webアプリマニフェストが効かない・PWAとして扱われないときの確認点は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
確認すべき項目の手順
インストール可能性は複数条件のANDなので、上から順に潰していくと原因にたどり着けます。
- 開発者ツールのApplicationタブで Manifest を開き、項目が正しく読めているか確認する
- head に link rel="manifest" href="..." があり、パスが正しいか確認する
- manifest.jsonのJSON構文にエラーがないか(末尾カンマなど)を点検する
- name / short_name / start_url / icons / display など必須項目が揃っているか確認する
- 十分なサイズのアイコン(大きめの正方形)が指定されているか確認する
- HTTPSで配信されているか、Service Workerの要件を満たしているか確認する
HTTPSとサブパスの落とし穴
PWAのインストールは原則HTTPS配信が前提です。ローカルのfileプロトコルやHTTPでは、マニフェストが正しくてもインストールできません。配信方式を確認するのが最初のチェックポイントです。
また start_url や scope の指定がサイトの実際のパスとずれていると、インストールはできても起動時に意図しないページに飛ぶことがあります。配信されるURL構造に合わせて設定する必要があります。
ZIPで配布する構成では、相対パスの基準がどこになるかを意識しないと、manifestやアイコンへの参照が崩れがちです。
確認共有環境での制約を理解する
ギガサイト便はHTTPSが自動で付くため、PWAのHTTPS要件はクリアしやすい一方、一時公開ページには noindex が付き、認証を併用すれば閲覧前にログインが入ります。こうした確認・レビュー向けの位置づけでは、フルなPWA運用よりも「マニフェストや挙動の確認」を目的にするのが現実的です。
CSS/JS/画像を含むZIPをドロップして共有すれば、manifest.jsonやアイコンを含めた一式をまとめて確認してもらえます。設定を直すたびに同じURLのまま差し替えられるので、インストール条件の試行錯誤がしやすくなります。本番のWebサイト運用そのものではなく、確認・共有の用途として捉えるのが適切です。
よくある質問
manifest.jsonを置けば必ずインストールできますか
いいえ。HTTPS配信、必須項目の充足、十分なサイズのアイコン、Service Workerなどの条件をすべて満たして初めてインストール可能と判断されます。一つ欠けても導線は出ません。
マニフェストが読めているかをどう確認しますか
開発者ツールのApplicationタブにあるManifestの項目を開くと、読み込めた内容と不足項目が表示されます。ここでエラーや空欄を確認するのが最短の切り分けです。
アイコンが表示されないのはなぜですか
iconsの指定漏れ、パスの誤り、解像度不足のいずれかが多いです。インストールには十分なサイズの正方形アイコンが必要で、小さい画像だけでは条件を満たせません。
確認用の共有でPWAをフルに試せますか
HTTPSは自動で付くためマニフェストや基本挙動の確認には向きます。ただし一時共有はnoindexや認証併用が前提の位置づけなので、本番のPWA運用そのものではなく確認用途として使うのが適切です。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。