独自のアプリ内インストールエクスペリエンスを提供する方法
多くのブラウザーでは、プログレッシブウェブアプリ（PWA）のインストールをPWAのユーザーインターフェイス内で直接有効にして促進することができます。インストール（以前はAdd to Home Screenと呼ばれることもありました）を使用すると、ユーザーはモバイルデバイスまたはデスクトップデバイスにPWAを簡単にインストールできます。PWAをインストールすると、ユーザーのランチャーに追加され、インストールされている他のアプリと同じように実行できるようになります。
ブラウザが提供するインストールエクスペリエンスに加えて、独自のカスタムインストールフローをアプリ内で直接提供することができます。
インストールを促すかどうかを検討するときは、ユーザーが通常どのようにPWAを使用しているかを考えると良いでしょう。たとえば、1週間にPWAを複数回も使用するユーザーがいる場合、これらのユーザーにとっては、スマートフォンのホーム画面またはデスクトップのオペレーティングシステムの[スタート]メニューから便利にアプリを起動できると便利でしょう。一部の生産性アプリやエンターテインメントアプリにとっては、インストールされたstandaloneモードまたはminimal-uiモードでウィンドウからブラウザーのツールバーを削除することによって画面領域が広がるということがメリットになるでしょう。
インストールを促す方法 #
プログレッシブウェブアプリがインストール可能であることを示し、カスタマイズしたアプリ内インストールのフローを提供するには、以下のことを行います。
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.`);
});アプリ内インストールのフロー #
アプリ内インストールを提供するには、ユーザーがクリックしてアプリをインストールできるボタンまたはその他のインターフェース要素を提供します。要素がクリックbeforeinstallpromptされたら、保存されているbeforeinstallpromptイベントに対してprompt()を呼び出します (deferredPrompt変数に格納されています)。それにより、ユーザーにはモーダルインストールダイアログが表示され、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にどのタイミングで、どのように反映されるかは、How Chrome handles updates to the web app manifestをお読みください。