Web App Manifest(manifest.json)検証ツール
manifest.jsonの内容を貼り付けるだけでPWAのインストール条件を満たしているか検証。name・start_url・display・iconsなどの必須項目とmaskableアイコンの有無をチェックし、不備を一覧表示します。
Tips
- 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経由の起動を判別しやすくなります。
よくある質問
余談ですが ― 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パネルなど)を併用することをおすすめします。