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経由の起動を判別しやすくなります。

よくある質問

主要ブラウザのPWAインストール条件では、name または short_name のいずれか、start_url、display(fullscreen・standalone・minimal-ui・browserのいずれか)、そして192x192以上のサイズを含むicons配列が必要とされています。これらが1つでも欠けているとインストールプロンプトが表示されないことがあります。

purpose: "maskable"を指定したアイコンのことです。Android端末はホーム画面のアイコンを円形や角丸四角形にマスク(切り抜き)して表示しますが、通常のアイコン画像をそのままマスクすると絵柄の端が欠けてしまうことがあります。maskableアイコンは中央に余白(セーフゾーン)を確保したデザインにすることで、どの形にマスクされても綺麗に表示されるようにする仕組みです。

「192x192」のように幅と高さをxで区切った形式で指定します。1つのアイコンファイルが複数サイズに対応するSVG等の場合は「any」と指定できます。複数サイズを1つのエントリで表現したい場合は「192x192 512x512」のようにスペース区切りで併記することも可能です。

W3Cの仕様ではfullscreen(画面全体を使用)・standalone(ブラウザUIを非表示にしたアプリ風表示)・minimal-ui(最小限のブラウザUIを表示)・browser(通常のブラウザタブとして開く)の4種類が定義されています。PWAらしい見た目にしたい場合はstandaloneを指定するのが一般的です。

manifest.jsonの内容が仕様を満たしているかの静的チェックに限られます。実際のインストール可否にはHTTPS配信であること、Service Workerが正しく登録されていることなど他の条件も関わるため、最終的な動作確認はブラウザの開発者ツールや実機での確認もあわせて行ってください。
ツールくん

余談ですが ― 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パネルなど)を併用することをおすすめします。