Skip to content
概要 ブログ 学習する 探検 パターン Case studies
このページ内
  • インストールを促す方法
    • beforeinstallpromptイベントをリッスンする
    • アプリ内インストールのフロー
  • PWAが正常にインストールされたことを検出する
  • PWAがどのように起動されたかを検出する
    • PWAがどのように開始されたかを追跡する
    • 表示モードがいつ変わるかを追跡する
    • 現在の表示モードに基づいてUIを更新する
  • アプリのアイコンと名前を更新する

独自のアプリ内インストールエクスペリエンスを提供する方法

Feb 14, 2020 — 更新済み May 19, 2021
Available in: English、Español、Português、Русский、中文、한국어
Appears in: プログレッシブウェブアプリ
Pete LePage
Pete LePage
TwitterGitHubGlitchHomepage
このページ内
  • インストールを促す方法
    • beforeinstallpromptイベントをリッスンする
    • アプリ内インストールのフロー
  • PWAが正常にインストールされたことを検出する
  • PWAがどのように起動されたかを検出する
    • PWAがどのように開始されたかを追跡する
    • 表示モードがいつ変わるかを追跡する
    • 現在の表示モードに基づいてUIを更新する
  • アプリのアイコンと名前を更新する

多くのブラウザーでは、プログレッシブウェブアプリ(PWA)のインストールをPWAのユーザーインターフェイス内で直接有効にして促進することができます。インストール(以前はAdd to Home Screenと呼ばれることもありました)を使用すると、ユーザーはモバイルデバイスまたはデスクトップデバイスにPWAを簡単にインストールできます。PWAをインストールすると、ユーザーのランチャーに追加され、インストールされている他のアプリと同じように実行できるようになります。

ブラウザが提供するインストールエクスペリエンスに加えて、独自のカスタムインストールフローをアプリ内で直接提供することができます。

Spotify PWAで提供されるInstall Appボタン
Spotify PWAで提供される「Install App」ボタン

インストールを促すかどうかを検討するときは、ユーザーが通常どのようにPWAを使用しているかを考えると良いでしょう。たとえば、1週間にPWAを複数回も使用するユーザーがいる場合、これらのユーザーにとっては、スマートフォンのホーム画面またはデスクトップのオペレーティングシステムの[スタート]メニューから便利にアプリを起動できると便利でしょう。一部の生産性アプリやエンターテインメントアプリにとっては、インストールされたstandaloneモードまたはminimal-uiモードでウィンドウからブラウザーのツールバーを削除することによって画面領域が広がるということがメリットになるでしょう。

インストールを促す方法 #

プログレッシブウェブアプリがインストール可能であることを示し、カスタマイズしたアプリ内インストールのフローを提供するには、以下のことを行います。

  1. beforeinstallpromptイベントをリッスンする。
  2. beforeinstallpromptイベントを保存して、後でインストールフローをトリガーできるようにする。
  3. PWAがインストール可能であることをユーザーに知らせ、アプリ内インストールのフローを開始するボタンまたはその他の要素を提供する。
beforeinstallpromptイベントとappinstalledイベントは、ウェブアプリマニフェストの仕様から独自のインキュベーターに移動されました。Chromeチームは、引き続きこれらのイベントをサポートしていきます。また、サポートを削除または廃止する予定はありません。GoogleのWeb DevRelチームは、カスタマイズされたインストールエクスペリエンスを提供するために、これらのイベントを使用することを引き続き推奨しています。

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プロパティが解決された直後に発生します。

お試しください

beforeinstallpromptイベントを使用してサイトをインストール可能にします。

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をお読みください。

プログレッシブウェブアプリ
最終更新: May 19, 2021 — 記事を改善する
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.