インストール可能にする

Pete LePage

beforeinstallprompt イベントをリッスンする

ブラウザが beforeinstallprompt イベントを発生させると、ウェブアプリをインストールできることを示し、ユーザーにインストール ボタンを表示できます。beforeinstallprompt イベントは、アプリがインストール可能性の基準を満たしている場合に発生します。

イベントをキャプチャすることで、デベロッパーはインストールをカスタマイズし、最適なタイミングでユーザーにインストールを促すことができます。

  1. [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
  2. window オブジェクトに beforeinstallprompt イベント ハンドラを追加します。
  3. event をグローバル変数として保存します。これは、後でプロンプトを表示するために必要になります。
  4. [インストール] ボタンを再表示します。

コード:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

インストール ボタンのクリックを処理する

インストール メッセージを表示するには、保存した beforeinstallprompt イベントで prompt() を呼び出します。prompt() はユーザー ジェスチャーから呼び出す必要があるため、インストール ボタンのクリック ハンドラで呼び出します。prompt()

  1. インストール ボタンのクリック イベント ハンドラを追加します。
  2. 保存された beforeinstallprompt イベントで prompt() を呼び出します。
  3. プロンプトの結果をログに記録します。
  4. 保存した beforeinstallprompt イベントを null に設定します。
  5. インストール ボタンを非表示にします。

コード:

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

インストール イベントをトラッキングする

インストール ボタンからウェブアプリをインストールする方法は、ユーザーがウェブアプリをインストールできる方法の 1 つにすぎません。Chrome のメニュー、ミニ情報バー、アドレスバーのアイコンからもアクセスできます。appinstalled イベントをリッスンすることで、これらのインストール方法をすべてトラッキングできます。

  1. window オブジェクトに appinstalled イベント ハンドラを追加します。
  2. インストール イベントをアナリティクスなどのメカニズムに記録します。

コード:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

関連情報

おめでとうございます。アプリをインストールできるようになりました。

他にも、次のような操作が可能です。