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

PWA は「display_override」プロパティを使用して、特別な表示モードに対応できます。

Thomas Steiner

ウェブアプリ マニフェストは、プログレッシブ ウェブアプリについて、またユーザーのデスクトップまたはモバイル デバイスにインストールされたときの動作についてブラウザに伝える JSON ファイルです。display プロパティを使用すると、アプリの起動時に表示されるブラウザ UI をカスタマイズできます。たとえば、アドレスバーやブラウザの Chrome を非表示にできます。ゲームを全画面表示で起動することもできます。 この記事の執筆時点で指定されている表示モードは次のとおりです。

これらの表示モードは、明確に定義された代替チェーン（"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_override の値としてのみ受け入れられ、display の値としては受け入れられません。display_override をサポートしていないブラウザは、display プロパティにフォールバックし、display_override を不明なウェブアプリ マニフェスト プロパティとして無視します。

役に立つリンク

• 説明に適した音声
• Intent to Ship スレッド
• Chromium のバグ
• Chrome ステータス エントリ
• Manifest Incubations リポジトリ

謝辞

display_override プロパティは Daniel Murphy によって正式化されました。