如何提供自己的應用程式內安裝體驗

許多瀏覽器都可讓您直接在 PWA 使用者介面中,啟用及鼓勵安裝漸進式網頁應用程式 (PWA)。安裝 (有時稱為「新增至主畫面」) 可讓使用者在行動裝置或電腦上輕鬆安裝 PWA。安裝 PWA 後,應用程式會新增至使用者的啟動器,如同其他安裝版應用程式,也能執行。

除了瀏覽器提供的安裝體驗之外,您也可以直接在應用程式中提供自訂安裝流程。

Spotify PWA 提供的「應用程式安裝」按鈕
Spotify PWA 提供的「安裝應用程式」按鈕

在考慮是否提升安裝量時,最好想想使用者通常如何使用 PWA。舉例來說,如果有一群使用者在一週內多次使用 PWA,他們就可以因為從手機主畫面或電腦作業系統的「開始」選單啟動應用程式,而新增便利性。在已安裝的 standaloneminimal-ui 模式中移除瀏覽器工具列,藉此建立額外的螢幕即時狀態,讓部分效率提升和娛樂應用程式也能受益。

必要條件

在開始之前,請確認您的 PWA 符合可安裝性規定,其中通常包括網頁應用程式資訊清單

鼓勵安裝

如何指出您的漸進式網頁應用程式可安裝,並提供自訂的應用程式內安裝流程:

  1. 監聽 beforeinstallprompt 事件。
  2. 儲存 beforeinstallprompt 事件,之後才能用來觸發安裝流程。
  3. 提醒使用者 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 事件 (儲存在 deferredPrompt 變數中) 上呼叫 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 屬性是一種承諾,應由使用者所選解決。在延遲事件中,您只能呼叫 prompt() 一次。如果使用者關閉,則必須等到再次觸發 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';
}

在顯示模式變更時追蹤

如要追蹤使用者是否在 standalonebrowser 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 形式啟動時,如果想為 PWA 套用不同的背景顏色,請使用條件式 CSS:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

更新應用程式的圖示和名稱

如果您需要更新應用程式名稱或提供新圖示,該怎麼做?請參閱「Chrome 如何處理網頁應用程式資訊清單更新」,瞭解 Chrome 反映這些變更的時間和方式。