Webページにアプリ名やアイコンを設定するWeb App Manifest
Web App Manifest（src/manifest.json）は、Webページをアプリとして扱う場合に利用する、アプリ名やアイコンなどを設定するファイルです。
Web App Manifestのファイル形式
Web App Manifestの例をリスト4に示します。
{
"name": "Angular PWA Sample",
"short_name": "AngularPWA",
"theme_color": "#1976d2",
"background_color": "#abd1f5",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
（略：ほかのサイズのアイコン定義）
]
}
Web App Manifestの主な設定項目を表1に示します。iconsには複数サイズのアプリアイコンが設定でき、実行する環境によって適切なアイコンが選択されます。
| No. | 設定項目 | 役割 |
|---|---|---|
| 1 | name | アプリ名 |
| 2 | short_name | 短いアプリ名 |
| 3 | theme_color | テーマ色 |
| 4 | background_color | 背景色 |
| 5 | display |
ブラウザーのUIを表示する場合はbrowser、 しない場合はstandalone |
| 6 | scope | Webアプリのパス |
| 7 | start_url | 最初に表示するページのURL |
| 8 | icons | アプリアイコン（複数サイズを設定可能） |
Webページをアプリとしてインストール
PCのChromeブラウザーで、Web App Manifestの効果を確認できます。執筆時点のChromeはPWAの機能が無効になっているので、URLバーに「chrome://flags/#enable-desktop-pwas」と入力して設定画面を表示し、PWA機能を有効にします。
Chromeを再起動後、Web App Manifestを含むWebページを表示すると、ブラウザーのメニューでWebページをインストールできるようになります。
メニューを選択すると、Webページがアプリとしてインストールされ、図6のように実行されます。
インストールされたWebページは、デスクトップにアプリアイコンが表示され、ほかのアプリのようにダブルクリックで起動できます。
［注］AndroidへのWebページのインストール
AndroidのChromeブラウザーは、追加設定なしでPWA機能が利用できます。ビルドされたWebページのファイルをSSL対応のWebサーバーにアップロードして、AndroidのChromeブラウザーでアクセスすると、画面下部にインストールボタンが表示されます（図8の赤枠）。
インストールされたWebページは、Web App Manifestで設定されたアイコンやアプリ名で、ネイティブアプリと同じように表示されます。
AndroidにインストールされたWebページには、表1のbackground_colorを背景色とした起動中画面が自動的に設定されます。また、画面上部ステータスバーの色は表1のtheme_colorが設定されます。
