プログレッシブ ウェブアプリは、Chrome のアドレスバーにインストール ボタンが新たに追加され、簡単にインストールできます。
パソコンでは通常、プログレッシブ ウェブアプリがインストール可能であることをユーザーに示さず、できる場合はその他メニュー内にインストール フローは表示されません。
Chrome 76（2019 年 6 月中旬にベータ版）では、アドレスバー（アドレスバー）にインストール ボタンが追加され、ユーザーが簡単にプログレッシブ ウェブアプリをパソコンにインストールできるようになります。サイトがプログレッシブ ウェブアプリ インストールの可否の基準を満たしている場合、Chrome のアドレスバーに自動的にインストール アイコンが表示されます。このボタンをクリックすると、PWA のインストールを求めるメッセージが表示されます。
他のインストール イベントと同様に、appinstalled イベントをリッスンして、ユーザーが PWA をインストールしたかどうかを検出できます。
独自のインストール プロンプトの追加
PWA に、ユーザーによるアプリのインストールが役立つユースケースがある場合（週に 1 回以上アプリを使用するユーザーがいる場合など）は、アプリのウェブ UI 内で PWA のインストールを促す必要があります。
独自のカスタム インストール ボタンを追加するには、beforeinstallprompt イベントをリッスンします。イベントが発生したら、イベントへの参照を保存し、プログレッシブ ウェブアプリをインストールできることをユーザーが認識できるようにユーザー インターフェースを更新します。
PWA のインストールを促すパターン
PWA のインストールを促すには、主に次の 3 つの方法があります。
- ブラウザの自動昇格（アドレスバーのインストール ボタンなど）。
- アプリの UI のプロモーション。バナー、ヘッダーやナビゲーション メニューのボタンなど、UI 要素がアプリのインターフェース内に表示されます。
- インライン プロモーションのパターンは、サイト コンテンツ内のプロモーションを織り交ぜて行われます。
詳しくは、PWA インストールの促進（モバイル）のパターンをご覧ください。主にモバイルに焦点を当てていますが、多くのパターンはパソコンにも適用でき、パソコンでも機能するように簡単に変更できます。