安裝提示

使用者可能不熟悉 PWA 安裝程序。身為開發人員，您可以瞭解邀請使用者安裝應用程式的正確時機。您也可以強化預設瀏覽器安裝提示。一起來看看可用的工具。

強化安裝對話方塊

當 PWA 通過安裝條件時，瀏覽器會提供預設安裝提示。瀏覽器會使用網頁應用程式資訊清單中的 name 和 icons 屬性建立提示。

部分瀏覽器會使用資訊清單中的宣傳欄位改善安裝提示體驗，包括 description、categories 和 screenshots。以 Android 版 Chrome 為例，如果您的 PWA 提供 description 和 screenshots 欄位的值，安裝對話方塊體驗就會從小型「新增至主畫面」資訊列，轉換為較大且詳細的對話方塊，類似應用程式商店提供的安裝提示。

查看促銷欄位實例：

beforeinstall 提示事件

如要吸引使用者安裝 PWA，首先會需要瀏覽器的安裝提示。如要導入您的安裝體驗，應用程式仍需要通過安裝條件：當瀏覽器偵測到可安裝應用程式時，就會觸發 beforeinstallprompt 事件。您必須實作這個事件處理常式，才能自訂使用者體驗。步驟如下：

1. 監聽 beforeinstallprompt 事件。
2. 儲存廣告素材 (後續步驟需使用)。
3. 透過使用者介面觸發。

請查看以下程式碼，瞭解 beforeinstallprompt 事件的事件監聽器範例、其擷取和之後的自訂用途。

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

之後，如果使用者點選自訂安裝按鈕，請使用先前儲存的 deferredPrompt 並呼叫其 prompt() 方法，因為使用者仍需要完成瀏覽器程序才能安裝應用程式。您是為了鼓勵使用者安裝 PWA 而延遲了後續活動。

透過這類活動，您可以加入提示和獎勵，吸引使用者安裝應用程式，以及在使用者參與度提高時選擇安裝提示。

下列情況不會觸發事件：

• 使用者已安裝目前的 PWA (僅適用於 Android 的電腦版和 WebAPK)。
• 應用程式不符合 PWA 安裝條件。
• 基於其他原因 (例如處於資訊站模式的裝置或不具備權限的裝置)，您無法在目前的裝置上安裝 PWA。

最佳提示的位置

提示的位置取決於應用程式，以及使用者最常與內容和服務互動的時間。擷取 beforeinstallprompt 時，您可以引導使用者繼續使用應用程式的原因，以及安裝後帶來的好處。 您可以選擇在應用程式的任何位置顯示安裝提示。常見的模式如下：在側邊選單、關鍵使用者歷程之後 (例如完成訂單)，或是註冊頁面之後。詳情請參閱宣傳 PWA 安裝的模式。

收集數據分析

使用數據分析可協助你進一步瞭解顯示提示的位置和時機。您可以使用 beforeinstallprompt 事件中的 userChoice 屬性；userChoice 承諾會根據使用者採取的動作解決問題。

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

實例觀摩

請在 Chromium 瀏覽器 (電腦或行動裝置) 上實際試試下列範例。

備用

如果瀏覽器不支援 beforeinstallprompt 或事件未觸發，則無法觸發瀏覽器的安裝提示。不過，在允許使用者手動安裝 PWA 的平台上 (例如 iOS)，你可以向使用者顯示這些操作說明。

這些操作說明應只使用瀏覽器模式。其他顯示選項 (例如 standalone 或 fullscreen) 則代表使用者已經安裝應用程式。

如果只要在瀏覽器模式中算繪元素，請使用 display-mode 媒體查詢：

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

程式碼研究室

程式庫

如需轉譯自訂安裝提示的相關說明，請參閱下列程式庫：

• PWA 建構工具
• PWA 的 React 安裝程式提示
• React PWA 安裝程序
• Vue PWA 安裝
• 新增到主畫面

資源

• 推廣 PWA 安裝的模式
• 如何提供自己的應用程式內安裝體驗
• MDN：新增至主畫面
• 網路資訊清單彙整