display_override

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

display メンバーは、開発者が推奨するウェブサイトの表示モードを決定するために使用されます。これは、要求された表示モードに対応していない場合に、ブラウザーが次善の表示モードに代替するプロセスに従います。高度な用途では、この代替プロセスでは十分でない場合があります。

display_override メンバーは、 display メンバーを使用する前にブラウザーが考慮する一連の表示モードを開発者に提供することで、これを解決しています。この値は表示モードの配列であり、順番に考慮され、最初にサポートされた表示モードが適用されます。

値

表示上書きオブジェクトは表示モード文字列の集合で、利用可能な値は以下の通りです。

browser: アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。
fullscreen: 利用可能な画面の領域をすべて使用し、ユーザーエージェントのクロームは表示されなくなります。
minimal-ui: アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。
standalone: アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。
tabbed Experimental: アプリケーションは、単一の OS レベルのウィンドウ内に、複数のアプリケーションコンテキストを含めることができます。対応しているブラウザーでは、これらのコンテキストをどのように表示するかを選択できますが、一般的なアプローチは、それらを切り替えるためのタブバーを提供することです。
window-controls-overlay Experimental: この表示モードは、アプリケーションが別の PWA ウィンドウにあり、デスクトップ OS 上にある場合にのみ適用されます。この場合、ウィンドウ制御のオーバーレイ機能が利用できるようにします。これは、ウィンドウの全領域がアプリのウェブコンテンツに使用され、ウィンドウの制御ボタン（最大化、最小化、閉じる、およびその他の PWA 固有のボタン）がウェブコンテンツの上にオーバーレイとして表示されるものです。

例

以下の例では、ブラウザーは以下の表示モード代替チェーンを fullscreen → minimal-ui → standalone の順番で考慮します。

json

{
  "display_override": ["fullscreen", "minimal-ui"],
  "display": "standalone"
}

仕様書

Specification
Manifest Incubations # display_override-member

ブラウザーの互換性

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`display_override` Experimental
`tabbed` display mode Experimental
`window-controls-overlay` display mode Experimental

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Experimental. Expect behavior to change in the future.
: See implementation notes.

値

例

仕様書

ブラウザーの互換性

Legend

関連情報