🌱
PWAの設定ファイル、Web app manifestの解説
Web app manifest（ウェブアプリマニフェスト）はPWA設置の時、ユーザーデバイスに必要な情報を提供してくれる設定ファイルです。アプリの名前やアイコン情報、アプリが開いた時のURL設定など、色々な情報が設定できます。ファイル名は自由で拡張子は.webmanifestが求められますが、.jsonの形もサポートされます。生成したファイルはプロゼクトのルートディレクトリに位置させてください。
重要マニフェスト属性
| 属性 | 必須 | A2HS[1]に必要 | 説明 |
|---|---|---|---|
| name | ⭕️ | ⭕️ | ウェブアプリケーションの名前 |
| short_name | ⭕️ | ⭕️ | nameを表示するのに十分なスペースがない場合、表示される名前 |
| icons | ⭕️ | ⭕️ | アプリケーションアイコンとして機能する画像ファイル。各オブゼクトにはsrc,sizes,typeの情報が必要。choromeの場合、少なくとも192x192px,512x512px二つのサイズが必要。 |
| id | - | - | ウェブアプリケーションの一意な識別子 |
| start_url | - | ⭕️ | ウェブアプリケーションの開始 URL |
| background_color | - | ⭕️ | スプラッシュ画面で表示される背景色。 CSSのbackground-colorと一致させるべきなので、gradient設定などは不可。 |
| display | - | ⭕️ | ウェブサイトの表示モード。 既定値はbrowser。指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従う。（fullscreen → standalone → minimal-ui → browser）[2]
|
| display_override | - | - | 表示モードの配列。順番に考慮され、最初にサポートされた表示モードが適用される。[3] |
| scope | - | - | アプリケーションコンテキストのナビゲーションスコープ。scopeが相対URLなら、ベースURLはマニフェストのURLを元にする。最後にスラッシュ（/）付かないと無効になるので注意。 |
| theme_color | - | - | アプリケーションの既定のテーマカラー。head内のmetaタグと統一させた方が良い |
| shortcuts | - | - | ウェブアプリ内の主要なタスクやページへのショートカット及びリンクの配列。ショートカットのオブゼクトの中にはnameとurlが必須項目。 |
| description | - | - | アプリケーションの目的などを説明。Android Chromeブラウザなら、PWA設置する時のプロムプトにdesctipsionとscreenshotsの情報が表示される。 |
| screenshots | - | - | アプリケーションのショーケースに向けたスクリーンショットの配列。各オブゼクトにはsrc,sizes,typeの情報が含まれる。Android Chromeブラウザなら、PWA設置する時のプロムプトにdesctipsionとscreenshotsの情報が表示される。イメージは特定基準に従う必要がある。[4]
|
manifestファイルの設定
manifestファイルを生成し、必要な情報を記載しましたら、PWAサイトの全てのページに以下のようにlinkタグを実装してください。SPAなら、index.htmlの<head>タグ内で追加すれば良いです。
<link rel="manifest" href="/manifest.webmanifest">
manifestファイルの確認
Chrome開発者ツールでapplication＞manifestで確認できます。
参考：
-
Add To Home Screen(ホーム画面に追加) ↩︎
-
（左）browserモード：アドレスバーとUIあり
（中央）standaloneモード：アドレスバー隠し、UIあり
（右）fullscreenモード：アドレスバーとUI隠し、コンテンツのみを見せる ↩︎ -
{
"display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone",
}
この場合、standalone→window-control-overlay→minimal-uiの代替チェーンに従う。 ↩︎ -
幅と高さは少なくとも320px、最大3840pxまでなること。最大寸法は最小寸法の 2.3 倍を超えないこと。全てのスクリーンショットのアスペクト比は同じであること。 ↩︎
Discussion