はじめに
WebアプリをPWA（プログレッシブウェブアプリ）対応させるときにmanifest.jsonファイルを作成しますが、その中のdisplayプロパティについてよく分からないことがありました。
standalone と fullscreenの違いについてです。
私がメインで使っているスマートフォン(iPhone14 pro)ではどちらに設定しても違いが分からなかったので、てっきり同じものと思っていましたがちゃんと違いがあるようです。
この記事では、実際のスクリーンショットを交えながらこの2つの違いを解説します。どちらを使うべきか迷っている方の参考になれば嬉しいです。
displayプロパティとは？
displayプロパティは、Webアプリがホーム画面から起動されたときに、どのようなUIで表示されるかを定義するものです。manifest.jsonファイルの中に、以下のように記述します。
{
"name": "My Awesome App",
"short_name": "AwesomeApp",
"start_url": ".",
"display": "standalone", // ← コレ
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
今回は、display に standalone と fullscreen を設定した場合の違いを見ていきましょう。
display: standalone の表示
standalone は、「独立したアプリ」のように見せるモードです。
特徴: ブラウザのアドレスバーやナビゲーションボタンが非表示になります。ただし、OSのステータスバー（時刻、バッテリー残量、通信状況など）は表示されたままです。
見た目: 一般的なネイティブアプリに最も近い見た目になります。
多くのPWAでは、この standalone がデフォルトまたは推奨の設定として使われることが多いです。
ちなみに、ブラウザで見たとき（画像左）と比較するとこんな感じです。
アドレスバーが消えて、アプリらしい見た目になっていることが分かります。
display: fullscreen の表示
fullscreen は、その名の通り「全画面」で表示するモードです。
standalone の特徴に加え、OSのステータスバーも非表示になります。画面のすべてをWebコンテンツで埋め尽くすことができます。
ゲームや動画プレイヤーなど、没入感を高めたいコンテンツに最適です。
画面上部のステータスバーが消えているのが分かりますね。使える領域が広がる分、時刻などを確認したいユーザーにとっては少し不便かもしれません。
比較まとめ
standalone |
fullscreen |
|
|---|---|---|
| アドレスバー | 非表示 | 非表示 |
| OSステータスバー | 表示される | 非表示 |
| 最適な用途 | 一般的なアプリ、ツール | ゲーム、動画、ディスプレイ |
| 没入感 | 高い | 最高 |
どちらを使うべきか？
基本的には、ユーザーが時刻やバッテリー残量を確認できる standalone を選ぶのが最も無難で親切な設計と言えるでしょう。
一方で、
- ゲームアプリで、少しでも表示領域を広く取りたい
- デジタルサイネージのように、特定の情報を常時全画面で表示させたい
- 映像コンテンツに集中させたい
といった明確な目的がある場合は、fullscreen が非常に効果的です。
iOSに関する注意点
冒頭で「iPhoneだと違いが確認できなかった」と書きました。これはAppleのデザインポリシーにより、ステータスバーの時刻やバッテリー表示を消すことができない仕様があるからです。これはPWAも例外ではなく、display:fullscreenにしてもステータスバーを消すことはできません。
!
↑このように、iOSではfullscreenを指定してもstandaloneとして扱われ、ステータスバーは消えません。
iPhoneで全画面表示を利用したアプリを作りたい場合、ネイティブアプリ化を検討する必要があるようです。
おわりに
今回は manifest.json の display プロパティ、standalone と fullscreen の違いについて解説しました。
一般的なアプリ → standalone
没入感重視のコンテンツ → fullscreen
と覚えておくと良さそうです。
PWA対応は細かい設定項目が多いですが、一つ一つ挙動を確かめながら実装していくと楽しいですね。この記事が誰かの助けになれば幸いです！