PWAマニフェストチェッカー

Chrome がインストールプロンプトを表示するには、以下のすべてが必要です: (1) <link rel="manifest"> を使用して HTML からリンクされた Web アプリマニフェスト。(2) マニフェストの name フィールド。(3) start_url フィールド。(4) "standalone"、"fullscreen"、または "minimal-ui" の display 値。(5) 最低 192×192 と 512×512 のサイズのアイコン。(6) HTTPS で提供されるサイト。これらのいずれかが欠けていると、Chrome がアドレスバーのインストールボタンを表示することができません。

マスク可能アイコン (purpose: "maskable") は、デバイスのランチャーに応じて、任意の形状 - 円、スクイーシャル、角丸四角形など - に安全にクロップできるように設計されています。マスク可能アイコンがない場合、Android はロゴの背後に白い円の背景を追加する可能性があり、これは一貫性がありません。マスク可能アイコンの「安全ゾーン」は画像の中央 80% です - ロゴをこの領域内に保つようにしてください。最良の結果を得るには、通常のアイコン (purpose: "any") とマスク可能アイコンの両方が必要です。maskable.app を使用してマスク可能アイコンをチェックおよび作成します。

display は、アプリが起動されたときに表示されるブラウザ UI を制御します: "standalone" - アプリのような外観、ブラウザアドレスバーなし (最も一般的な選択)。"fullscreen" - 画面全体をカバーし、システム UI なし (ゲーム用)。"minimal-ui" - いくつかのブラウザナビゲーションを表示しますが、アドレスバーは隠します。"browser" - フルブラウザで開く (PWA の目的を無くします)。ほとんどのアプリでは "standalone" を使用してください。注意: iOS の Safari は、ユーザーが共有メニューからホーム画面に追加するときのみ standalone display を使用します - iOS ではインストールバナーが異なります。

スクリーンショット (screenshots 配列) は Chrome の拡張インストール UI で使用され、アプリ名、説明、プレビュー画像を含む豊富なインストールダイアログが表示されます。スクリーンショットがない場合、Chrome は最小限のインストールプロンプトを使用します。これらは Chrome ウェブストアと一部のアプリストアリストでも使用されます。広い (デスクトップ) フォームファクターと狭い (モバイル) フォームファクター用に、少なくとも 2 つずつスクリーンショットを含めてください。寸法は 320×320 から 3840×2160 ピクセルの間で、一貫したアスペクト比である必要があります。

はい - Chrome のインストールプロンプトには、このバリデーターはマニフェストのみをチェックしていますが、サービスワーカーが必要です。サービスワーカーはページに登録され、動作状態である必要があります。フェッチイベントに応答するだけの最小限のサービスワーカーで十分です。サービスワーカーはオフライン機能を有効にし、3 つの PWA の柱の一部です: マニフェスト + サービスワーカー + HTTPS。Workbox (workbox-window) などのツールは、サービスワーカーのセットアップを大幅に簡素化します。