多くのブラウザでは、プログレッシブ ウェブアプリ(PWA)を PWA のユーザー インターフェース内で直接有効にしてインストールを促すことができます。インストール(旧称: ホーム画面に追加)を行うと、ユーザーがモバイル デバイスやデスクトップ デバイスに PWA を簡単にインストールできるようになります。PWA をインストールすると、ユーザーのランチャーに追加され、インストール済みの他のアプリと同様に実行できるようになります。
ブラウザが提供するインストール エクスペリエンスに加えて、独自のカスタム インストール フローをアプリ内に直接提供できます。
インストールを促進するかどうかを検討する際は、ユーザーが PWA を通常どのように使用しているかを考慮することをおすすめします。たとえば、PWA を 1 週間に複数回使用するユーザーがいる場合、スマートフォンのホーム画面やデスクトップ オペレーティング システムのスタート メニューからアプリを起動することで、利便性が向上する可能性があります。一部の生産性向上アプリやエンターテイメント アプリも、インストール済みの standalone
モードまたは minimal-ui
モードでウィンドウからブラウザ ツールバーを削除することで作成される追加の画面領域を活用します。
前提条件
開始する前に、PWA がインストール可能性の要件を満たしていることを確認してください。この要件には通常、ウェブアプリ マニフェストがあることが含まれます。
インストールを促す
プログレッシブ ウェブアプリがインストール可能であることを示し、カスタムのアプリ内インストール フローを用意するには:
beforeinstallprompt
イベントをリッスンします。- 後でインストール フローをトリガーできるように、
beforeinstallprompt
イベントを保存します。 - PWA がインストール可能であることをユーザーに通知し、アプリ内インストール フローを開始するボタンやその他の要素を提供します。
beforeinstallprompt
イベントをリッスンする
プログレッシブ ウェブアプリが必要なインストール条件を満たしている場合、ブラウザは beforeinstallprompt
イベントを発生させます。イベントへの参照を保存し、ユーザー インターフェースを更新して、ユーザーが PWA をインストールできるようにします。
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
アプリ内インストール フロー
アプリ内インストールを提供するには、アプリをインストールするためにユーザーがクリックできるボタンやその他のインターフェース要素を提供します。要素がクリックされたら、(deferredPrompt
変数に格納されている)保存された beforeinstallprompt
イベントで prompt()
を呼び出します。ユーザーにモーダル インストール ダイアログが表示され、PWA のインストールの確認を求められます。
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt, and can't use it again, throw it away
deferredPrompt = null;
});
userChoice
プロパティは、ユーザーの選択に応じて解決される Promise です。遅延イベントの prompt()
は 1 回だけ呼び出すことができます。ユーザーが拒否した場合は、beforeinstallprompt
イベントが再び発生するまで待機する必要があります。通常は userChoice
プロパティが解決された直後に発生します。
PWA が正常にインストールされた時間を検出します
userChoice
プロパティを使用すると、ユーザーがユーザー インターフェース内からアプリをインストールしたかどうかを判断できます。ただし、ユーザーがアドレスバーやその他のブラウザ コンポーネントから PWA をインストールする場合、userChoice
は役に立ちません。代わりに、appinstalled
イベントをリッスンする必要があります。これは、PWA のインストールに使用されたメカニズムに関係なく、PWA がインストールされるたびに呼び出されます。
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
PWA の起動方法を検出する
CSS display-mode
メディアクエリは、PWA がブラウザタブで起動された方法、またはインストール済みの PWA として起動されたことを示します。これにより、アプリの起動方法に応じて異なるスタイルを適用できます。たとえば、インストール済みの PWA として起動する場合は、常にインストール ボタンを非表示にし、戻るボタンを表示します。
PWA の起動方法を追跡する
ユーザーが PWA をどのように起動したかをトラッキングするには、matchMedia()
を使用して display-mode
メディアクエリをテストします。iOS 版 Safari ではまだこの機能をサポートしていないため、navigator.standalone
を確認する必要があります。これにより、ブラウザがスタンドアロン モードで実行されているかどうかを示すブール値が返されます。
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
表示モードの変化をトラッキングする
standalone
と browser tab
の間でユーザーが変更したかどうかをトラッキングするには、display-mode
メディアクエリの変更をリッスンします。
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
現在の表示モードに基づいて UI を更新する
インストール済みの PWA として起動したときに PWA に異なる背景色を適用するには、条件付き CSS を使用します。
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
アプリのアイコンと名前を更新する
アプリ名を更新したり、新しいアイコンを提供したりする必要がある場合はどうすればよいでしょうか。 変更が Chrome にいつ、どのように反映されるかについては、Chrome でウェブアプリ マニフェストの更新を処理する方法をご覧ください。