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