多くのブラウザでは、インストールを有効にしてプロモートできます プログレッシブ ウェブアプリ(PWA)のユーザー インターフェース内で直接管理できます。 インストール(旧称「ホーム画面に追加」とも呼ばれます)を使用すると、 モバイルやデスクトップ デバイスで PWA を作成できます。PWA をインストールすると、ユーザーの 他のインストール済みアプリと同様に実行できます。
ブラウザが提供するインストール エクスペリエンスのほか、 アプリ内で直接独自のカスタム インストール フローを提供できます。
<ph type="x-smartling-placeholder">![Spotify PWA に用意されている [アプリをインストール] ボタン](https://web.developers.google.cn/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?hl=ja)
インストールを促進するかどうかを検討する際は、ユーザーが通常どのように
おすすめしますたとえば、同じ PWA を使用する複数のユーザーが
1 週間に 1 回使用すると、これらのユーザーには
スマートフォンのホーム画面またはパソコンのスタート メニューからアプリを起動する
OS です。生産性やエンタメ関連のアプリケーションの中には、
ブラウザ ツールバーを画面から削除することで、
インストールされている 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.`);
});
アプリ内インストール フロー
アプリ内インストールを提供するには、ボタンなどのインターフェース要素を提供する
クリックまたはタップしてアプリをインストールできます要素がクリックされたり
prompt()
イベント(beforeinstallprompt
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 をインストールした場合でも、常にインストールできます。
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 を起動する方法を追跡するには、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 に異なる背景色を適用するには 条件付き CSS を使用:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
アプリのアイコンと名前を更新する
アプリ名を更新したり、新しいアイコンを提供したりする必要がある場合はどうすればよいですか? Chrome によるウェブアプリ マニフェストの更新の処理方法をご確認ください では、変更が Chrome にいつ、どのように反映されるかを確認できます。