インストール プロンプト

ユーザーが PWA のインストール プロセスに慣れていない可能性があります。デベロッパーは、いつユーザーにアプリのインストールを促すのが適切かを判断できます。ブラウザのデフォルトのインストール プロンプトを強化することもできます。利用できるツールを確認しましょう

インストール ダイアログの強化

PWA がインストール条件を満たすと、ブラウザはデフォルトのインストール プロンプトを表示します。ブラウザは、ウェブアプリ マニフェストの name プロパティと icons プロパティを使用してプロンプトを作成します。

Microsoft Edge のインストール プロンプト。

一部のブラウザでは、マニフェストのプロモーション フィールド（description、categories、screenshots など）を使用してインストール プロンプトのエクスペリエンスを強化できます。たとえば、Android で Chrome を使用している場合、PWA で description フィールドと screenshots フィールドの値を指定すると、インストール ダイアログのエクスペリエンスは、小さな [ホーム画面に追加] 情報バーから、アプリストアからのインストール プロンプトのような、より大きく詳細なダイアログに変わります。

プロモーション フィールドの活用例をご覧ください。

beforeinstallprompt イベント

ユーザーに PWA をインストールしてもらうための最初のステップは、ブラウザのインストール プロンプトです。独自のインストール エクスペリエンスを実装するには、アプリがインストール基準を満たす必要があります。つまり、アプリがインストール可能であることをブラウザが検出すると、beforeinstallprompt イベントが発生します。ユーザー エクスペリエンスをカスタマイズするには、このイベント ハンドラを実装する必要があります。手順は次のとおりです。

  1. beforeinstallprompt イベントをリッスンします。
  2. 保存します（後で必要になります）。
  3. UI からトリガーします。
で確認できます。

beforeinstallprompt イベントのイベント リスナーとそのキャプチャとその後のカスタム使用の例については、以下のコードを確認してください。

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

次に、カスタマイズしたインストール ボタンをユーザーがクリックしたら、以前に保存した deferredPrompt を使用して prompt() メソッドを呼び出します。これは、ユーザーが引き続きアプリをインストールするためにブラウザのプロセスを実行する必要があるためです。そこで、PWA のインストールを促す適切なコンテキストをユーザーに提供するまでイベントを遅らせました。

イベントをキャプチャすることで、ユーザーがアプリをインストールするヒントやインセンティブを追加できます。また、ユーザーのエンゲージメントが高いことがわかっている場合は、インストールを促すこともできます。

次の場合はイベントは発生しません。

  • ユーザーが現在の PWA をすでにインストールしている（Android のパソコンと WebAPK にのみ有効）。
  • アプリが PWA のインストール条件を満たしていない。
  • 他の理由（キオスクモードのデバイスや権限がないデバイスなど）で、現在のデバイスに PWA をインストールできない。
で確認できます。

プロンプトの最適な場所

プロンプトを表示する場所は、アプリケーションや、ユーザーがコンテンツやサービスに最も関心を持つタイミングによって異なります。beforeinstallprompt を取得すると、アプリを使い続ける理由とインストールすることで得られるメリットをユーザーに説明できます。 アプリの任意の場所にインストールのヒントを表示するよう選択できます。一般的なパターンとしては、サイドメニュー、注文完了などのクリティカル ユーザー ジャーニーの後、登録ページの後などがあります。詳しくは、PWA インストールを促進するためのパターンをご覧ください。

分析情報を収集する

分析を使用すると、プロンプトをいつ、どこで表示するべきかをより深く理解できます。beforeinstallprompt イベントの userChoice プロパティを使用できます。userChoice は、ユーザーが行ったアクションによって解決される Promise です。

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

実例を見る

次のサンプルを Chromium ブラウザ（パソコンまたは Android）で実際に試してみてください。

フォールバック

ブラウザが beforeinstallprompt をサポートしていない場合や、イベントが発生しない場合、ブラウザのインストール プロンプトをトリガーする他の方法はありません。ただし、ユーザーが手動で PWA をインストールできるプラットフォーム（iOS など）では、ユーザーにこの手順を表示できます。

これらの手順はブラウザモードでのみレンダリングしてください。他の表示オプション（standalone や fullscreen など）は、ユーザーがすでにアプリをインストールしていることを意味します。

ブラウザモードでのみ要素をレンダリングするには、display-mode メディアクエリを使用します。

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

ライブラリ

カスタム インストール プロンプトのレンダリングについては、次のライブラリをご覧ください。

リソース