PWAのmanifest.jsonで「display」の指定による表示の違い（fullscreen、standaloneなど）

PWA対応時、manifest.jsonの「display」の指定によって、アプリの表示がどう変わるか見たかったので、4つの値（fullscreen、standalone、minimal-ui、browser）を設定してみて、実際に表示の違いを確認してみました。

なお、確認はAndroid端末で行っています。

「fullscreen」を指定した場合。

見て分かる通り、Webサイト（アプリ）の画面以外はなにも表示されません。上下からスワイプするとステータスバーなどが一時的に表示されます。

「standalone」を指定した場合。

フルスクリーンの時は上下のスワイプで一瞬しか表示されなかったステータスバーなどが、常に表示されるようになります。

「minimal-ui」を指定した場合。

上部にURLやアプリ名が表示されます。この辺りからブラウザっぽくなります。

「browser」を指定した場合。

ブラウザでWebサイトを開いた時と同様の画面になります。

せっかくPWA対応でWebサイトをネイティブアプリのような見た目で扱えるようになるので、実際に設定するのは「fullscreen」か「standalone」のどちらかになりそうです。

また「fullscreen」と「standalone」の選択は、ブラウザの戻るボタンがあった方が便利かどうかで決まると思います。

今回はAndroidでの挙動を確認しましたが、iOSだとまた異なるので注意が必要です。