Chrome 76 では、「ホーム画面に追加」画面のミニ情報バーを非表示にできます。

Penny McLachlan
Penny McLachlan

プログレッシブ ウェブアプリとミニ情報バーの背景

プログレッシブ ウェブアプリ(PWA)は、アプリのような即時読み込み、信頼性、インストール可能なウェブサイトを作成するためのパターンです。

Android で PWA がインストール可能性チェックリストに合格すると、ブラウザ ウィンドウの下部にミニ情報バーと呼ばれる Chrome システム ダイアログが表示されます。

現在、[ホーム画面に追加] ミニ情報バーは beforeinstallprompt イベントと同時に表示されます。

Chrome 76 の変更

Google はコミュニティの声に耳を傾け、デベロッパーが PWA のインストールをユーザーに求めるタイミングをより細かく管理したいと考えていることを把握しました。皆様のご意見にお応えします

Chrome 76 以降では、beforeinstallprompt イベントで preventDefault() を呼び出すことで、ミニ情報バーを表示しないようにできます。

beforeinstallprompt イベントは、プログレッシブ ウェブアプリのインストールを促進し、ユーザーがホーム画面に簡単に追加できるようにするのに役立ちます。Google のコミュニティでは、PWA をホーム画面にインストールしたユーザーはエンゲージメントが高く、再訪、アプリでの滞在時間が増え、該当する場合はコンバージョン率も高くなるという報告が寄せられています。

Pinterest がインストール バナーを使用して PWA のインストールを促進している例。
インストール バナーを使用して PWA のインストールを促進している Pinterest の例。コードサンプルやその他のベスト プラクティスなど、ホーム画面への追加フローの詳細については、ホーム画面に追加するをご覧ください。

ミニ情報バーなしでウェブアプリを宣伝するには、beforeinstallprompt イベントをリッスンしてから、イベントを保存します。次に、インストール ボタンの追加、インストール バナーの表示、フィードの内側のプロモーションの使用、メニュー オプションの使用などにより、PWA をインストールできることをユーザー インターフェースに表示するように更新します。ユーザーがインストール要素をクリックすると、保存した beforeinstallprompt イベントで prompt() を呼び出して、ホーム画面に追加するモーダル ダイアログを表示します。

[ホーム画面に追加] ミニ情報バーの今後

ホーム画面に追加する情報バーの使用は、引き続き一時的な措置です。Google は、プログレッシブ ウェブアプリのユーザーが引き続きインストールできるようにする新しい UI パターンをテストしています。このテストでは、ブラウジング エクスペリエンスの煩雑さを軽減する方法でインストールできるようにしています。