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

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

Thomas Steiner 氏

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

プロパティ 次のコマンドを実行します。
fullscreen ブラウザ UI なしでウェブ アプリケーションを開き、使用可能な表示領域全体を占有します。
standalone ウェブアプリを開くと、スタンドアロン アプリのようなデザインになります。アプリはブラウザとは別のウィンドウで実行され、URL バーなどの標準的なブラウザ UI 要素は非表示になります。
minimal-ui このモードは standalone と似ていますが、ナビゲーションを制御するための UI 要素の最小限のセット（戻るや再読み込みなど）をユーザーに提供します。
browser 標準的なブラウザ エクスペリエンス。

これらの表示モードは、明確に定義されたフォールバック チェーン（"fullscreen" → "standalone" → "minimal-ui" → "browser"）に従います。特定のモードをサポートしていないブラウザは、チェーン内の次の表示モードにフォールバックします。

display プロパティの欠点

このハードウェアによるフォールバック チェーンのアプローチには、次の 3 つの問題があります。

  • "minimal-ui" が特定のブラウザでサポートされていない場合、デベロッパーは "minimal-ui" を強制的に "browser" 表示モードに戻さずにリクエストすることはできません。
  • デベロッパーは、"standalone" モードのウィンドウに戻るボタンを含めたり除外したりする場合など、ブラウザ間の相違に対応する方法がありません。
  • タブ形式のアプリケーション モードなどのデータ探索では、フォールバック チェーンの自然な場所がないため、現在の動作では下位互換性のある新しい表示モードを導入できません。

display_override プロパティ

こうした問題は、ブラウザが display プロパティの前に考慮する display_override プロパティによって解決されます。この値は、順序があると見なされる文字列のシーケンスであり、最初にサポートされている表示モードが適用されます。サポートされていない場合、ブラウザは 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 は不明なウェブアプリ マニフェスト プロパティとして無視されます。

謝辞

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