PWA
マニフェストの表示モード（standalone、fullscreen など）
Web アプリマニフェストの display プロパティは、インストール済み PWA がどれだけブラウザ UI を見せるかを制御します。"browser" は通常のタブで開き、"minimal-ui" は細いナビゲーションバーを残し、"standalone" はブラウザクローム無しでネイティブアプリのように見せ、"fullscreen" はステータスバーを含めすべてを隠します。ほとんどのインストール可能なアプリは "standalone" を使い、あるモードがサポートされない場合、ブラウザはリストを下にフォールバックします。
ブラウザクロームの 4 段階
display は 4 つの値を持つ単一のマニフェストフィールドで、ブラウザ UI が最も多いものから最も少ないものへと並びます。要求したモードをサポートしないとブラウザはリストを下にフォールバックするので、fullscreen の要求が standalone に、standalone が minimal-ui に落ちることがあります。
各モード
| display の値 | ユーザーに見えるもの |
|---|---|
| browser | 通常のブラウザタブ、フルクローム |
| minimal-ui | 戻る／再読み込みのある細いバー、アドレスバー無し |
| standalone | アプリのような見た目、ブラウザクローム無し、ステータスバーは維持 |
| fullscreen | ステータスバーを含めすべて非表示 |
表示モードに関するよくある質問
display: standalone は何をしますか？
インストール済み PWA をブラウザクローム無し（アドレスバーやタブ無し）で起動し、デバイスのステータスバーを保ちながら、ネイティブアプリのように見せ、感じさせます。
どの表示モードを使うべきですか？
ほとんどのインストール可能なアプリには "standalone" です。"fullscreen" はゲームのような没入的な場合にのみ、"minimal-ui" は少しナビゲーションが欲しいとき、"browser" はアプリのような振る舞いをまったく望まないときに使います。
なぜ私の PWA はまだアドレスバーを表示するのですか？
アプリが実際にはインストールされていない（まだタブの中にいる）か、要求したモードをサポートしないためブラウザがクロームの多いモードにフォールバックした、のいずれかです。