Web App Manifest バリデーター
PWA の manifest.json を Web App Manifest 仕様に照らして検証し、Android のアダプティブアイコンのセーフゾーンを基準にマスカブルアイコンをプレビューします。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
プログレッシブウェブアプリがスムーズにインストールされるには、manifest.json が、ブラウザやアプリストアが実際に確認するフィールドを満たしている必要があります。このバリデータは、アップロードされた Manifest を解析し、W3C の Web App Manifest 仕様に沿ってフィールドを一つずつ検証します。name や short_name の欠落、空または不正な形式の icons 配列、src、sizes、type が不足しているアイコン、解析できない start_url、認識されない display 値、有効な CSS カラーでない theme_color や background_color 文字列を検出します。検出結果はすべて、仕様の引用ではなく、平易な日本語の文章で表示されるため、何を修正すべきか、なぜそれがインストール可能性にとって重要なのかがすぐにわかります。
特筆すべき機能は、マスカブルアイコンのセーフゾーンプレビューです。Android のアダプティブアイコンは、「purpose」：「maskable」とマークされたアイコンに対して、端末が選択するマスク形状（円、スクワークル、ティアドロップなど）を適用します。アイコンのビューポートの中心を覆う40%の円の外側にある部分は、端末が適用するマスクによって切り取られる可能性があります。manifest.json と併せて、Manifest が参照するアイコン画像ファイルをアップロードすると、このツールはそれらをファイル名で照合し、指定されたサイズで Canvas に描画し、その正確なセーフゾーン円を重ねて表示します。これにより、あなたのアートワークがトリミングに耐えられるかどうかを自分の目で確認できます。
各プレビューの下に表示される合格/不合格バッジは、形式的なチェック項目ではありません。デコードされた画像データの実際のピクセルごとの解析結果に基づいています。このツールは、セーフゾーン円の外側にある非背景コンテンツ（マスクによって切り取られるコンテンツ）の量と、アイコンの透過部分の割合（マスカブルアイコンは、透過部分があると下地のマスクカラーが透けて見えるため、不透明な背景で完全に塗りつぶされているべきです）を計測します。どちらのチェックも、アップロードされた実際のビットマップに対して実行されるため、結果は推測ではなく、実際のアイコンファイルを反映したものになります。
すべての処理はお使いのブラウザ内でローカルに実行されます。manifest.json は File API で読み込まれ、アイコンは createImageBitmap または FileReader/Image によるフォールバックでデコードされ、ピクセル解析はインメモリの Canvas 上で行われます。サーバーへのアップロードは一切発生しないため、まだ公開されていないアプリ名、内部パスの start_url、開発中のアイコンを参照している場合でも安心です。