PWAのインストールボタンが表示されない原因と確認すべきポイント

結論：PWAのインストールボタンは、条件が揃わないと出ない

PWAを作ったつもりなのに、スマホやPCでインストールボタンが表示されないことがあります。

これはバグというより、PWAとして認識されるための条件が足りていないことが多いです。

特に多いのは、manifest.jsonの設定不足、HTTPSではない、ブラウザ側が表示条件を満たしていない、というパターンです。

実際に困った話

自分でもPWA系の実験をしていると、「manifestは書いたのに、なぜかインストールできない」という場面が何度もありました。

見た目は普通に動いているので、最初はどこが悪いのか分かりにくいです。

でも実際には、PWAはただHTMLを作れば完成ではなく、ブラウザが「これはインストール可能なWebアプリだ」と判断する必要があります。

原因1：manifest.jsonが正しく読み込まれていない

PWAでは、Web App Manifestという設定ファイルが重要です。

ここには、アプリ名、アイコン、表示モード、開始URLなどを書きます。

例えば、以下のような項目が不足していると、PWAとして認識されにくくなります。

• name または short_name がない
• start_url がない
• display が browser のまま
• 必要なサイズのアイコンがない
• manifest.jsonへのリンクが間違っている

特にアイコンは見落としやすいです。表示上は問題なくても、PWA判定では必要サイズが足りないことがあります。

原因2：HTTPSではない

PWAは基本的にHTTPS環境で動かす必要があります。

ローカル開発では動くのに、本番環境でうまくいかない場合、URLや配信環境を確認した方がいいです。

GitHub PagesやCloudflare Pages、Cloudflare Workersなどを使っている場合は基本的にHTTPSになりますが、独自ドメイン設定直後などは一時的に不安定なこともあります。

原因3：ファイルを置く階層が違う

manifest.jsonがindex.htmlと同じ階層にあることを確認しましょう。
基本的にmanifest.jsonはその配下のみに対応することしかできません。

/lab/index.html
/lab/assets/manifest.json
この場合は有効ではありません。

必ず、/lab/manifest.jsonに配置しましょう。

僕の場合、cloudflareだけで構成を作っているので、こういったルーティングで間違えたりします。。

原因4：iPhoneではインストールボタンの出方が違う

AndroidのChromeでは、条件が揃うとインストール案内が出ることがあります。

一方で、iPhoneのSafariでは「インストールボタン」というより、共有メニューから「ホーム画面に追加」する流れになります。

つまり、AndroidとiPhoneでは同じPWAでも見え方が違います。

ここを勘違いすると、「iPhoneだけPWAにならない」と感じやすいです。

確認すべきポイント

• manifest.jsonが読み込まれているか
• name / short_name / start_url / display が設定されているか
• アイコンサイズが足りているか
• Service Workerが登録されているか
• HTTPSで配信されているか
• iPhoneでは共有メニューから追加する前提になっているか

実験結果として感じたこと

PWAは、コードだけ見るとシンプルに見えます。

でも実際には、ブラウザごとの差、OSごとの差、キャッシュの残り方でかなり挙動が変わります。

特にSafariは、更新がすぐ反映されなかったり、ホーム画面アイコンが古いまま残ったりすることがあります。

なので、PWAを作るときは「書いたら終わり」ではなく、実機で確認するのがかなり大事です。

関連記事

PWAの基本から確認したい場合は、PWAとは？スマホのWebサイトを“アプリ化”する仕組みをわかりやすく解説が参考になります。

実際の作り方を確認したい場合は、PWAの作り方｜manifest.json・Service Worker・ホーム画面対応を丁寧に解説もあわせて読むと流れが分かりやすいです。

iPhone側の制限が気になる場合は、SafariのPWA制限とは？できること・できないことまとめ【2026】も近い内容です。

まとめ

PWAのインストールボタンが表示されないときは、まずmanifest.json、Service Worker、HTTPS、ブラウザごとの仕様を確認するのが近道です。

特にiPhoneでは、Androidのようなインストール案内を期待すると混乱しやすいです。

PWAは便利ですが、まだブラウザごとの差が大きいので、最後は実機で見るのが一番確実です。