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

Penny McLachlan

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

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

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

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

Chrome 76 の変更点

Google はコミュニティの皆様からのご意見を伺い、デベロッパーが PWA のインストールをユーザーに求めるタイミングをより細かく管理したいというご要望をいただきました。皆様のご意見にお応えします

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

beforeinstallprompt イベントを使用すると、プログレッシブ ウェブアプリのインストールを促進し、ユーザーがホーム画面にアプリを追加しやすくなります。コミュニティのメンバーから、PWA をホーム画面にインストールしたユーザーはエンゲージメントが高く、リピート訪問回数やアプリの利用時間が多く、コンバージョン率も高いという報告が寄せられています。

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

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

[ホーム画面に追加] インフォバーの使用は、一時的な対策です。Google は、プログレッシブ ウェブアプリのユーザーがインストールできるようにしつつ、ブラウジング エクスペリエンスの煩雑さを軽減する新しい UI パターンを試験運用しています。