display

display

キーワード値の文字列です。指定されなかった場合は、既定値の browser が使用されます。このキーワード値には以下のようなものがあります。

fullscreen

ブラウザーの UI 要素を非表示にしてアプリを開き、利用可能な表示領域全体を使用します。この値は、全画面での利用が重要であり、望ましいアプリで使用します。例えば、ブラウザーコントロールを表示せずに画面全体を使用できるゲームアプリで使用すると、完全に没入できるゲームの体験を提供できます。

メモ: マニフェストの display メンバーの fullscreen の値は、全画面 API とは独立して動作します。 fullscreen 表示モードはブラウザーウィンドウ全体の状態を全画面に変更しますが、全画面 API はウィンドウ内の特定の要素のみを全画面にします。したがって、ウェブアプリは Document.fullscreenElement が null で Document.fullscreenEnabled が false であっても、 fullscreen 表示モードにすることができます。

standalone

アプリをスタンドアロンのネイティブアプリのようなルック＆フィールで開きます。これによって、アプリに独自のウィンドウと、アプリランチャー内の独自のアイコンを持たせることができます。ブラウザーは URL バーなどの UI の要素を除外しますが、ステータスバーなどの他の UI の要素を含めることができます。 例えば、バッテリー残量や通知用の端末のステータスバーを表示しながら、ブラウザーの URL バーなしで独自のウィンドウで開くタスクマネージャーアプリに使用することができます。

minimal-ui

アプリをスタンドアロンアプリのようなルック＆フィールで開きますが、最小限のナビゲーション用 UI 要素を表示します。具体的な要素はブラウザーによって異なりますが、通常は戻る、進む、更新などのナビゲーションコントロールや、場合によってはアプリの URL を表示する方法などが含まれます。さらにブラウザーは、コンテンツの共有や印刷機能を提供するプラットフォーム固有の UI の要素を含めることもあります。最小限のブラウザーインターフェイスを表示することが有益なアプリには、この値を使用します。例えば、ニュースリーダーや、その他の一般の読み取り専用アプリで、戻るボタンや再読み込みボタンなどの必要最低限のブラウザーコントロールのみを表示させ、よりクリーンでわずらわしいものを排除したインターフェイスを指定したい場合などに使用します。

browser

従来のブラウザーのタブまたは新しいウィンドウで、リンクを開くためのプラットフォーム専用の慣例に従ってアプリを開きます。 ブラウザーのコンテキスト内で使用するように設計されたアプリで、ブラウザーの全機能が必要な場合にこの値を使用します。 display モードが指定されていない場合、これが既定値となります。

ブラウザーがアプリケーションコンテキストに表示モードを適用すると、それが最上位の閲覧コンテキストの既定の表示モードになります。 ブラウザーは、セキュリティ上の理由でこの表示モードを上書きしたり、ユーザーに別の表示モードに切り替えることを指定したりすることがあります。

ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは fullscreen → standalone → minimal-ui → browser です。

表示モードに応じて選択的に CSS を提供するには、 display-mode メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。

次のコードのように、使用されている display-mode に応じて、アプリのスタイル設定を調整することができます。

@media (display-mode: standalone) {
  body {
    background-color: #f0f0f0; /* スタンドアロンモード用のライトグレーの背景 */
  }
}

@media (display-mode: fullscreen) {
  body {
    background-color: #000000; /* 全画面モード用の黒の背景 */
  }
}

次の例は、 "HackerWeb" というウェブアプリ用のマニフェストファイルで、ユーザーの端末にインストールされた際に、アプリがどのように表示され、動作するかを定義しています。display メンバーは standalone に設定されており、これは、 URL バーなどの一般的なブラウザーの UI 要素を表示せずに、アプリを別のウィンドウで開くことを指定しています。

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "description": "A readable Hacker News app",
  "icons": [
    {
      "src": "images/icons/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}