プログレッシブ ウェブアプリとミニ情報バーの背景
プログレッシブ ウェブアプリ(PWA)は、アプリと同じように瞬時に読み込まれる、信頼性が高くインストール可能なウェブサイトを作成するためのパターンです。
PWA が Android のインストールに関するチェックリストに合格すると、ブラウザ ウィンドウの下部にミニ情報バーと呼ばれる Chrome システム ダイアログが表示されます。
現在、[ホーム画面に追加] 画面のミニ情報バーは、beforeinstallprompt
イベントと同時に表示されます。
Chrome 76 での変更点
Google はコミュニティの声にお応えし、PWA のインストールをユーザーに求めるタイミングをより細かく制御したいというご意見をいただきました。フィードバックをありがとうございます。
Chrome 76 以降では、beforeinstallprompt
イベントで preventDefault()
を呼び出すことで、ミニ情報バーを非表示にできます。
beforeinstallprompt
イベントを使用すると、プログレッシブ ウェブアプリのインストールを促進し、ユーザーがホーム画面に簡単に追加できるようになります。Google のコミュニティによると、ホーム画面に PWA をインストールするユーザーのエンゲージメントは高く、リピーター数やアプリの利用時間、コンバージョン率が高いことがわかっています。
ミニ情報バーなしでウェブアプリを宣伝するには、beforeinstallprompt
イベントをリッスンし、イベントを保存します。次に、インストール ボタンの追加、インストール バナーの表示、インフィード プロモーションの使用、メニュー オプションの使用などを行って、PWA をインストールできることを示すようにユーザー インターフェースを更新します。ユーザーがインストール要素をクリックしたときに、保存された beforeinstallprompt
イベントで prompt()
を呼び出して、ホーム画面への追加モーダル ダイアログを表示します。
[ホーム画面に追加] のミニ情報バーの今後
「ホーム画面に追加」情報バーの使用は、まだ一時的な措置です。 Google は、ブラウジング エクスペリエンスが見やすくなる形で、プログレッシブ ウェブアプリ ユーザーが引き続きインストールできるように、新しい UI パターンをテストしています。