PWA では、「display_override」を使用してプロパティを使用して、特別な表示モードに対処します。
ウェブアプリ マニフェストは、Progressive についてブラウザに伝える 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。