PWA では、「display_override」プロパティを使用して特別な表示モードに対応できます。
ウェブアプリ マニフェストは、プログレッシブ ウェブアプリと、ユーザーのデスクトップ パソコンまたはモバイル デバイスにインストールされたときの動作をブラウザに伝える JSON ファイルです。display プロパティを使用すると、アプリの起動時に表示されるブラウザ UI をカスタマイズできます。たとえば、アドレスバーやブラウザの Chrome を非表示にできます。ゲームを全画面表示で起動することもできます。簡単にまとめると、この記事の執筆時点で指定されているディスプレイ モードは次のとおりです。
| プロパティ | 次のコマンドを実行します。 |
|---|---|
fullscreen |
ブラウザ UI のないウェブ アプリケーションを開き、利用可能な表示領域全体を使用します。 |
standalone |
ウェブアプリを開き、スタンドアロン アプリのように表示します。アプリはブラウザとは別の独自のウィンドウで実行され、URL バーなどの標準のブラウザ UI 要素は非表示になります。 |
minimal-ui |
このモードは standalone に似ていますが、ナビゲーションを制御するための最小限の UI 要素（戻る、再読み込みなど）をユーザーに提供します。 |
browser |
標準のブラウザ エクスペリエンス。 |
これらのディスプレイ モードは、明確に定義されたフォールバック チェーン（"fullscreen" → "standalone" → "minimal-ui" → "browser"）に従います。ブラウザが特定のモードをサポートしていない場合は、チェーン内の次のディスプレイ モードにフォールバックします。
display プロパティの欠点
このハードワイヤード フォールバック チェーン アプローチには、次の 3 つの問題があります。
"minimal-ui"が特定のブラウザでサポートされていない場合、デベロッパーは"browser"ディスプレイ モードに戻さずに"minimal-ui"をリクエストできません。- デベロッパーは、ブラウザによって異なる点（
"standalone"モードのウィンドウにブラウザが戻るボタンを含めるかどうかなど）を処理できません。 - 現在の動作では、タブ付きアプリケーション モードなどのエクスプロレーションがフォールバック チェーンに自然に配置されないため、下位互換性のある方法で新しいディスプレイ モードを導入することはできません。
display_override プロパティ
これらの問題は display_override プロパティによって解決されます。このプロパティは、display プロパティの前にブラウザで考慮されます。値は順序付きと見なされる文字列のシーケンスで、最初にサポートされているディスプレイ モードが適用されます。サポートされていない場合、ブラウザは display フィールドの評価にフォールバックします。
次の例では、ディスプレイモードのフォールバック チェーンは次のようになります。（"window-controls-overlay" の詳細については、この記事では扱いません）。
"window-controls-overlay"（まず、display_overrideをご覧ください）。"minimal-ui""standalone"（display_overrideが使い果たされたら、displayを評価します）。"minimal-ui"（最後に、displayフォールバック チェーンを使用します）。"browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
下位互換性を維持するため、今後のディスプレイ モードは display_override の値としてのみ使用でき、display の値として使用することはできません。display_override をサポートしていないブラウザは、display プロパティにフォールバックし、display_override を不明なウェブアプリ マニフェスト プロパティとして無視します。
役に立つリンク
謝辞
display_override プロパティは Daniel Murphy によって正式化されました。