インストール可能にする

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 のメニュー、ミニ情報バー、 アドレスバーのアイコンから探すことができます。Google Chat では 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;
});

関連情報

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

他にも、次のようなことができます。