本頁面由 Cloud Translation API 翻譯而成。

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

Pete LePage

許多瀏覽器都可讓您啟用及提升安裝作業。安裝 (有時稱為「新增至主畫面」) 可讓使用者自行安裝下載 PWA。安裝 PWA 會將其新增至使用者的啟動器，讓應用程式可以像任何其他已安裝的應用程式一樣執行。

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

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

在考慮是否要宣傳安裝時，請考慮使用者通常如何使用您的 PWA。舉例來說，如果有一組使用者多次使用您的 PWA 這些使用者可能受益於從手機主畫面或電腦的「開始」功能表啟動應用程式以及作業系統部分效率提升和娛樂應用程式也能因此受益將瀏覽器工具列從已安裝 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 屬性是可讓使用者自行選擇問題的保證。在延遲事件中，您只能呼叫 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';
}

在顯示模式變更時追蹤

如要追蹤使用者是否在 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 如何處理網頁應用程式資訊清單的更新即可在 Chrome 中瞭解變更生效的時間和方式。