インストール可能にする

Pete LePage

このグリッチには、ウェブアプリをインストール可能にするために必要なフィールドを含むウェブ マニフェストが含まれています。

また、デフォルトで非表示になっているインストール ボタンもあります。

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

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

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

  1. [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
  2. beforeinstallprompt イベント ハンドラを window オブジェクトに追加します。
  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);
});

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

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

  1. appinstalled イベント ハンドラを window オブジェクトに追加します。
  2. インストール イベントを分析やその他のメカニズムに記録します。

コード:

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

関連情報

これでアプリがインストール可能になりました。

他にも以下のことを試してみてください。