PWA インストール UI の拡充

はじめに

モバイル デバイスと、デバイス ベンダーのアプリストアの導入により、ソフトウェアを発見、評価、インストールする方法に対するユーザーの心理的モデルが変わりました。今では、ユーザーはアプリストアと、アプリストアを通じて提供される追加情報(アプリに関するコンテキスト、ソーシャル フィードバック、評価など)を熟知しています。こうした追加情報は、ChromeOS、Mac、Windows などのデスクトップ オペレーティング システムに現れています。

現在のインストール サーフェスの課題

現在、ユーザーが PWA をインストールする場合、最小限の情報で情報バーとモーダル オーバーレイが表示されます。インストールを続行すると、ユーザーにコンテキストを提供することなく、プロセスがあっという間に終了してしまいます。これは、アプリをインストールするユーザーの期待に反し、何が起こったかについて多少混乱する可能性があります。

PWA インストール UI の例。
PWA インストール UI の例。

デベロッパーがネイティブ エクスペリエンスと同等のインストール環境を提供できるように Chrome に新しいインストール サーフェス「Richer Install」が導入されます。これによりデベロッパーは、マニフェスト ファイルに説明とスクリーンショットを追加して、Chrome for Android 内のボトムシート ダイアログに表示できます。

Chrome のボトムシート UI の例。
Chrome のボトムシート UI の例

これにより、デベロッパーは、ユーザーの期待に沿い、インストールしたエクスペリエンスの既存のメンタルモデルに似せた、魅力的なインストール プロセスを作成できます。

機能豊富なインストール UI の拡張。
機能豊富なインストール UI の拡張。
リッチなインストール UI の折りたたみ。
機能豊富なインストール UI を折りたたみました。

下位互換性

マニフェスト ファイルにスクリーンショットが 1 つも含まれていないウェブサイトでは、引き続き既存のプロンプトが表示されます。これは、デベロッパー コミュニティの動向とユーザーの反応に応じて、今後変更される可能性があります。

UI のプレビュー

この UI は、Android 版 Chrome 94 とパソコン版 Chrome 108 で動作します。

この機能は squoosh.app で有効になっており、そこでプレビューできます。

実装

より充実したインストール UI ダイアログを表示するには、デベロッパーは、対応するフォーム ファクタのスクリーンショットを 1 つ以上 screenshots 配列に追加する必要があります。description フィールドは必須ではありませんが、指定することをおすすめします。コンテンツ ダイアログは、screenshots フィールドと description フィールドのコンテンツを使用して作成され、アプリストアでのインストールに近いエクスペリエンスを実現しています。この UI は、ユーザーがアプリを追加しようとしていることをユーザーが把握するのに役立ち、利用可能なスペースが広いため、デベロッパーはインストール時にユーザーに具体的なコンテキストを提供できます。

たとえば、デベロッパーは description フィールドを使用して、ユーザーにデバイスへのインストールを促すアプリの機能を強調できます。また、screenshots を使用すると、ウェブアプリの外観をスタンドアロンとして提示でき、プラットフォーム アプリによるアクセスも簡単です。

詳細な仕様と、それらをアプリに追加するためのガイドについては、よりリッチなインストール UI パターンをご覧ください。

フィードバック

将来的には、カテゴリやアプリの評価などの他のデータを追加することを検討していますが、これはデベロッパーやユーザーからのフィードバックに基づいて行われます。

今後数か月以内に、デベロッパーの皆様がこの新しい UI パターンをどのように試しているかを楽しみにしています。フィードバックもぜひお寄せください。こちらのフォームにご記入ください。