- プログレッシブWebアプリ（PWA）は、Webアプリケーションを ネイティブアプリのように 感じさせる強力な手段であり、さまざまなディスプレイモードを通じてユーザー体験を最適化できる
- PWAのマニフェストファイルで設定する ディスプレイモード は、ブラウザーUIの可視性を調整し、各モードに応じてユーザーインターフェースを調整することで、Webとアプリ体験の差を緩和する
- CSS メディアクエリ とJavaScriptを活用して、ディスプレイモードごとにコンテンツと機能を調整し、ユーザーの要求を満たすカスタマイズされた体験を提供する
- PWAユーザーと一般的なWebサイト訪問者は 異なる期待 を持つため、ディスプレイモードに応じてナビゲーション、インストールプロンプト、コンテンツを最適化する必要がある
- ディスプレイモードごとの最適化は、PWAを より洗練され、よりアプリらしく 感じさせ、Web上でのアプリ体験を向上させる重要な技術である
PWAのディスプレイモードと最適化の必要性
- PWAはWebアプリケーションを ネイティブアプリのように 実現する技術であり、ブラウザー環境から離れることで ユーザビリティの問題 が生じる可能性がある
- ブラウザーが提供する戻る、再読み込み、URLのコピーなどの機能を失う可能性がある
- Webサイトに適した要素が、アプリ環境では不自然になることがある
manifest ファイルで設定可能な ディスプレイモード は次のとおり
fullscreen: すべてのブラウザーUIを隠して全画面で使用standalone: ブラウザーコントロールを隠し、ネイティブアプリのように見せるminimal-ui: 最小限のブラウザーUI要素を表示browser: 標準的なブラウザーインターフェースを提供
- ブラウザーUIが隠れると ユーザー体験 に影響する可能性があるため、ディスプレイモードごとの最適化は必須である
ディスプレイモードのメディアクエリ活用
- メディアクエリ を使って、ディスプレイモードに応じてスタイルや機能を調整できる
- 例:
@media (display-mode: standalone) はstandaloneモードでのみ適用される
fullscreen、minimal-ui、browser モードにそれぞれ対応するクエリをサポート
- 実験的モードである
window-controls-overlay と tabbed は、display_override を通じてユーザー定義の順序で設定できる
window-controls-overlay: デスクトップでウィンドウコントロールボタンをオーバーレイ表示tabbed: 単一ウィンドウ内で複数のアプリケーション環境をサポート
- JavaScriptでディスプレイモードを確認し、動的に調整できる
- 例:
window.matchMedia("(display-mode: standalone)").matches で現在のモードを確認
- モード変更時にイベントを検知して動的にUIを調整
実用的な適用事例
- PWAユーザー向けコンテンツの最適化: PWAをインストールしているユーザーはすでにコンバージョン済みのユーザーなので、マーケティング用コンテンツを減らし、ユーザー体験 に集中する
- インストールプロンプトなど不要な要素は 非表示 にする
- 追加オプションの提供: ブラウザーUIがない場合、フォントサイズ調整、ライト/ダークモード切り替え、共有機能など アプリ内の代替手段 が必要
- プラットフォームに適した機能: モバイルネイティブアプリで一般的な 下部ナビゲーションバー はPWAには適しているが、Webサイトでは不自然である
- 印刷ボタンのような機能は、PWAモードでは隠すのが適切
- インストールプロンプトの管理: すでにインストール済みのPWAでインストールプロンプトが表示されないよう、メディアクエリ またはJavaScriptで制御する
- 例:
.hide-in-pwa ユーティリティクラスでPWAモード時に要素を隠す
- スコープと開始URLの戦略:
scope と start_url でPWA環境とWeb環境の間でコンテンツを差別化する
scope: PWAの最上位パスを定義し、範囲を外れるとブラウザーUIを表示start_url: アプリ起動時に表示するページを指定。例: ダッシュボードへ直接移動
- ビュー遷移の強化: ネイティブアプリで一般的な ビュー遷移 効果をPWA専用に適用する
- 例:
@media (display-mode: standalone) 内でビュー遷移用CSSを設定
ブラウザーサポートとテスト
- ディスプレイモードのメディアクエリは、ほとんどのブラウザーで 広範にサポート されている
- FirefoxはPWAをサポートしておらず、Android版Firefoxでは
browser モードでのみ表示される
- プログレッシブエンハンスメント により、未対応ブラウザーでも自然な機能低下を保証できる
- テストはデバイスやブラウザーごとに動作が異なるため、多様な環境 で行う必要がある
- ブラウザーはディスプレイモードのシミュレーションを提供しないため、実際のデバイスとOSの組み合わせでテストする必要がある
要約と示唆
display-mode メディアクエリを活用することで、PWAをインストール状況や表示コンテキストに応じた 適応型体験 として提供できる
- インストールプロンプトの非表示、ナビゲーション支援、コンテンツ最適化、ネイティブ感の強化、段階的改善が可能
- PWAユーザーは一般的なWeb訪問者とは異なる 要求と期待 を持つため、ディスプレイモードに応じたきめ細かな調整が必要である
- PWAの成熟度が高まるほど、丁寧な実装 と最適化が魅力的なアプリ体験を作る鍵になる
- 追加情報はSmashing Magazineの「Extensive Guide To Progressive Web Applications」を参照するとよい
2件のコメント
Firefoxもnightlyで再びPWAをサポートし始めました。まもなくstableにも追加されるでしょう。
ブラウザという経路を通して使わなければならないので……いつもネイティブを好むのですが、PWAの話を見るといつも面白いです。
同じ最適化を追求しているのに、方向性が違う……