明日の表示モードに備える

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" の詳細はこの記事の対象外です)。

  1. "window-controls-overlay"(まず、display_override を確認します。)
  2. "minimal-ui"
  3. "standalone"display_override を使い切ったら、display を評価します。)
  4. "minimal-ui"(最後に、display フォールバック チェーンを使用します)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

下位互換性を維持するため、今後の表示モードは display_overridedisplay は不可。 display_override をサポートしていないブラウザは display プロパティにフォールバックして無視します。 display_override が不明なウェブアプリ マニフェスト プロパティであること。

謝辞

display_override プロパティは次のように形式化されました。 Daniel Murphy