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

Penny McLachlan
Penny McLachlan

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

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

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

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

Chrome 76 での変更点

Google はコミュニティの声にお応えし、PWA のインストールをユーザーに求めるタイミングをより細かく制御したいというご意見をいただきました。フィードバックをありがとうございます。

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

beforeinstallprompt イベントを使用すると、プログレッシブ ウェブアプリのインストールを促進し、ユーザーがホーム画面に簡単に追加できるようになります。Google のコミュニティによると、ホーム画面に PWA をインストールするユーザーのエンゲージメントは高く、リピーター数やアプリの利用時間、コンバージョン率が高いことがわかっています。

インストール バナーを使用して PWA のインストールを促す Pinterest の例。
インストール バナーを使用して PWA のインストール可能性を促進している Pinterest の例。コードサンプルやおすすめの方法など、ホーム画面に追加するフローについて詳しくは、ホーム画面に追加するをご覧ください。

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

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

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