Web App Manifest（manifest.json）チェッカー
manifest.jsonの内容を貼り付けるだけでPWAのインストール条件を満たしているか検証。name・start_url・display・iconsなどの必須項目とmaskableアイコンの有無をチェックし、不備を一覧表示します。
manifest.jsonがPWAの条件を満たすか調べる
Web App Manifest は、サイトをホーム画面へ追加したときのアイコン・名前・起動時の見え方を決める JSON ファイルです。このツールは内容を貼り付けるだけで、`name`・`start_url`・`display`・`icons` といった必須項目と maskable アイコンの有無を確認し、足りないものを一覧にします。
**ここで注意したいのは、manifest が揃っていてもそれだけではインストールできるようにならないという点です。** ブラウザがインストールを提案する条件には、**HTTPS で配信されていること・Service Worker が登録されていること**も含まれており、これらは manifest の中身からは判定できません。このツールが見ているのは条件のうち manifest が担う部分だけです。**もう一つが maskable アイコンで、これが無いと Android ではアイコンが白い丸の中に小さく収まった見た目になります。** `purpose` に `maskable` を指定した専用の画像を別に用意すると、端末の形に合わせて縁まで描画されます。
使い方
- manifest.json の内容を貼り付ける JSON 全体をそのまま入れてください。
- サンプルで挙動を確かめる 良い例と最小構成の例が用意してあります。
- 不足している項目を読む **必須項目の欠落と、maskable アイコンの有無が指摘されます。**
- HTTPSとService Workerも別に確認する **この2つは manifest の外側の条件です。** ツールの結果だけで判断しないでください。
使いこなすためのヒント
- nameとshort_nameは両方指定するのがおすすめです。short_nameが無いとホーム画面のアイコン下に表示される文字列がnameから機械的に切り詰められ、意図しない表示になることがあります。
- purpose: "maskable"を持つアイコンが無いと、Android等の一部端末でアイコンの周囲が不自然に切り取られたり背景色が透けて見えたりすることがあります。既存のicons配列にmaskable用のエントリを1件追加するだけで解消できます。
- iconsには192x192以上のサイズを最低1件、可能であれば512x512以上のサイズも用意してください。前者はホーム画面アイコン、後者はスプラッシュ画面表示に使われます。
- Chrome等のブラウザが実際に採用するPWAインストール条件は将来的に変更される可能性があるため、このツールの判定結果はあくまで目安として扱い、最終確認はChrome DevToolsのApplicationパネル等でも行うことをおすすめします。
- start_urlは相対パス（例: "/?source=pwa"）でも問題ありません。インストール元を計測したい場合はクエリパラメータを付けておくと、アクセス解析でPWA経由の起動を判別しやすくなります。
活用シーン
PWA化に着手する
何を書けばよいかが分からない段階で、必要な項目を把握できます。
インストールできない原因を切り分ける
**manifest 側に不備があるのかどうかを、まず切り分けられます。**
アイコンの見た目を改善する
maskable アイコンを足すと、Android のホーム画面での見栄えが変わります。
既存サイトの設定を点検する
以前に作った manifest が、いまの条件を満たしているかを確かめられます。
Web App Manifestの用語
- name / short_name
- アプリの名前です。**`short_name` はホーム画面のアイコン下に出るため、短く収まる表記にします。**
- start_url
- ホーム画面から起動したときに開くURLです。トップとは別の画面を指定することもできます。
- display
- 起動時の見え方です。`standalone` にするとブラウザのアドレスバーが消え、アプリらしい見た目になります。
- icons
- アイコンの一覧です。**192×192 と 512×512 の2つは用意しておくのが基本です。**
- maskable
- **端末ごとのアイコンの形に合わせて切り抜かれることを前提にした画像**です。`purpose` に指定します。
- theme_color
- 起動時のステータスバー等に使われる色です。サイトの配色と揃えると一体感が出ます。
よくある質問
余談ですが ― Web App ManifestとPWAの関係
Web App Manifestは、W3Cが策定するJSON形式の仕様で、Webサイトをネイティブアプリのようにホーム画面へ追加・インストールするために必要な情報（アプリ名・アイコン・起動時の表示モード・テーマカラーなど）をまとめて宣言します。PWA（Progressive Web App）という言葉自体は2015年にGoogleのエンジニアが提唱した概念ですが、その中核をなす技術要素の一つがこのmanifest.jsonと、オフライン動作を担うService Workerの2つです。
manifest.jsonが正しく設定されていないと、ブラウザは「インストール可能なアプリ」として認識せず、ホーム画面への追加を促すプロンプト（Chromeの「インストール」バナー等）が表示されません。特にiconsの解像度不足やdisplayの値の誤りは、JSON自体は文法的に正しいため気づきにくく、実際にインストールを試すまで発覚しないことが多い不備です。
maskableアイコン（purpose: "maskable"）は比較的新しい仕様で、2019年頃からAndroidの「アダプティブアイコン」に対応する目的で追加されました。通常のアイコンは端末によって円形・角丸四角形などにマスク処理されるため、余白のないアイコン画像を用意しているとロゴの一部が切り取られてしまいます。maskable用のアイコンは安全領域（セーフゾーン）を考慮したデザインにする必要があり、通常のiconsエントリとは別に用意するのが一般的です。
このツールはmanifest.json単体の静的な検証に特化しており、Service Workerの登録状況やHTTPS配信の有無といった、実際のインストール可否を左右する他の条件までは検証しません。本番環境での最終確認にはブラウザの開発者ツール（Chrome DevToolsのApplicationパネルなど）を併用することをおすすめします。