インストール可能にする
この Glitch には、非常に単純な Service Worker や Web アプリマニフェストなど、プログレッシブ Web アプリをインストール可能にするために必要な重要なコンポーネントがすでに含まれています。また、デフォルトで非表示になっているインストールボタンもあります。
beforeinstallprompt イベントをリスンする #
ブラウザが beforeinstallprompt イベントを発すると、プログレッシブ Web アプリをインストールできるようになり、インストールボタンをユーザーに表示できるようになります。beforeinstallprompt イベントは、PWA がインストール可能性の基準を満たしたときに発生します。
Click Remix to Edit to make the project editable.
beforeinstallpromptイベントハンドラーをwindowオブジェクトに追加します。eventをグローバル変数として保存します。プロンプトを表示するために後で必要になります。インストールボタンを非表示状態を解除します。
コード：
window.addEventListener('beforeinstallprompt', (event) => {
// モバイルでミニ情報バーが表示されないようにする。
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// イベントをスタッシュして後でトリガーできるようにする。
window.deferredPrompt = event;
// インストールボタンのコンテナから 'hidden' クラスを削除する。
divInstall.classList.toggle('hidden', false);
});インストールボタンのクリックを処理する #
インストールプロンプトを表示するには、保存された beforeinstallprompt イベントで prompt() を呼び出します。prompt() の呼び出しは、インストールボタンのクリックハンドラーで行われます。これは、prompt() がユーザーのジェスチャーによって呼び出されるためです。
- インストールボタンのクリックイベントハンドラーを追加します。
- 保存された
beforeinstallpromptイベントでprompt()を呼び出します。 - プロンプトの結果をログに記録します。
- 保存された
beforeinstallpromptイベントを null に設定します。 - インストールボタンを非表示にします。
コード:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// デファーされたプロンプトは使用できません。
return;
}
// インストールプロンプトを表示する。
promptEvent.prompt();
// 結果をログに記録する
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// デファーされたプロンプトの変数をリセット。
// prompt() は1回しか呼び出せません。
window.deferredPrompt = null;
// インストールボタンを非表示にする。
divInstall.classList.toggle('hidden', true);
});インストールイベントを追跡する #
インストールボタンを使用してプログレッシブ Web アプリをインストールするのは、ユーザーが PWA をインストールできる方法のひとつに過ぎません。Chrome のメニュー、ミニ情報バー、およびオムニボックスのアイコンを使用することもできます。appinstalled イベントをリスンすることで、これらすべてのインストール方法を追跡できます。
appinstalledイベントハンドラーをwindowオブジェクトに追加します。- インストールイベントを分析またはその他のメカニズムに記録します。
コード:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// deferredPrompt をクリアしてガベージコレクションを行えるようにする
window.deferredPrompt = null;
});参考文献 #
おめでとうございます。アプリがインストール可能になりました！
以下に、これから実行できる追加内容を紹介します。