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