create-react-appで生成されるmanifest.jsonとは何か
create-react-app で生成されている /public/manifest.json とは何者なのか？無知であったマニフェストファイルについて改めて調べてみた。
調査前の前提知識
デフォルトで生成される manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
見た感じ、ファビコンなどのアイコンがセットされているので、Webサイト公開に必要なアイコンセットを定義できるもの？という認識
start_url や display: standalone など用途不明なものがおおい。
マニフェストファイルとは
manifest.json は、マニフェストファイルと呼ばれるもので、プログレッシブウェブアプリ (PWA)の振る舞いを設定するJSONファイル。
プログレッシブウェブアプリ (Progressive web apps, PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのこと
既存のサイトをPWAにするには、以下の手順が必要。
-
HTTPSに対応する -
manifest.jsonを設置する -
Service Workerを有効にする
Service Workerを有効にしていなくても、スマホでホーム画面にWebアプリを追加できるA2HS という機能はデフォルトで使用できる。 その際の振る舞い、アイコンの設定ができる。
htmlファイルへはmanifestとして読み込ませると適用される
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
マニフェストファイルのプロパティ
-
short_nameおよび/またはname（必須） ... 少なくともshort_nameまたはnameプロパティを提供する必要がある。両方が提供short_nameされている場合は、ユーザーのホーム画面、ランチャー、またはスペースが限られている可能性があるその他の場所で使用されます。nameアプリのインストール時に使用されます。 -
icons... PWAをインストールすると、ホーム画面、アプリランチャー、タスクスイッチャー、スプラッシュ画面などで仕様するアイコンを定義できる。SVGも対応しているっぽいが、アイコンがインストール時のままになってしまう。 -
start_url（必須） ... 起動時にアプリケーションを起動する場所を指示できる。ユーザーがアプリをホーム画面に追加したときに表示されていたページからアプリが毎回起動しないようにする。 -
background_color... アプリがモバイルで最初に起動されたとき、スプラッシュ画面で使用される -
display... アプリの起動時に表示されるブラウザーUIをカスタマイズできる -
fullscreen... ブラウザUIなしでアプリケーションを開き、使用可能な表示領域全体を占有 -
standalone... スタンドアロンアプリ風に開く。ブラウザとは別の独自ウィンドウで実行され、URLなどの標準のブラウザUI要素が非表示になる -
minimal-ui... スタンドアロンに加えて戻る、リロードなどのセットをユーザーに提供する -
browser... ブラウザ -
scope... このウェブアプリケーションのアプリケーションコンテキストのナビゲーションスコープを定義します。これは、マニフェストが適用されている時に見ることができるウェブページを制限するものです。ユーザーがスコープ外へ移動した場合は、ブラウザータブやウィンドウの中の通常のウェブページに戻ります。 -
theme_color... ツールバーの色を指定し、アプリ切り替え画面等のプレビューに反映される。ドキュメントヘッドで指定されているテーマの色theme_colorと一致している必要がある -
shortcuts... アプリ内で使用できるショートカットオブジェクト -
description... アプリの説明 -
screenshots... 画像オブジェクトの配列。ユーザーがアプリをインストールする場合にChrome forAndroidで使用される -
display_override... マニフェストにモードを設定することで表示方法を選択できる。ブラウザが特定のモードをサポートしていない場合、チェーン内の次の表示モードにフォールバックされる。 https://github.com/WICG/display-override/blob/main/explainer.md
{
"display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone",
}
スプラッシュ画面の自動生成
Chromeは、マニフェストプロパティからスプラッシュ画面を自動的に作成する。
-
name -
background_color -
icons
background_colorスプラッシュ画面からアプリへのスムーズな移行を提供するために、はロードページと同じ色にする必要がある。
Chromeは、デバイスのデバイス解像度に厳密に一致するアイコンを選択する。
ほとんどの場合、192pxと512pxのアイコンを提供するだけで十分っぽいが、ピクセルを完璧にするために追加のアイコンを提供することも可能。
iPhoneは自動でスプラッシュ画像を生成してくれない。
