新增至主畫面行為的變更

Pete LePage

自從推出「新增至主畫面」橫幅後，我們一直努力更清楚地標示漸進式網頁應用程式，並簡化使用者安裝方式。我們的最終目標是在所有平台的網址列中提供安裝按鈕，而 Chrome 68 則朝這個目標邁進。

異動內容

自 Android 版 Chrome 68 (2018 年 7 月的穩定版) 起，Chrome 將不再顯示「新增至主畫面」橫幅。如果網站符合新增至主畫面條件，Chrome 就會顯示迷你資訊列。接著，如果使用者點選迷你資訊列，或您在使用者手勢中從 beforeinstallprompt 事件呼叫 prompt()，Chrome 就會顯示「新增至主畫面」對話方塊。

A2HS 橫幅 Chrome 67 以下版本

A2HS 橫幅螢幕截圖

網站符合「新增至主畫面」條件時，系統會自動顯示提示，且網站不會在 beforeinstallprompt 事件中呼叫 preventDefault()

或

在 beforeinstallprompt 事件上呼叫 prompt() 即可顯示。

迷你資訊列 Chrome 68 以上版本

A2HS 資訊列螢幕截圖
網站符合新增至主畫面條件時顯示

如果使用者關閉通知，系統要過一段時間 (約 3 個月) 才會再次顯示。

無論是否在 beforeinstallprompt 事件中呼叫 preventDefault()，都會顯示。

日後推出多功能方塊安裝按鈕時，Chrome 版本將移除這項 UI 處理方式。

A2HS 對話方塊

A2HS 對話方塊螢幕截圖

在 Chrome 68 以上版本中，從 beforeinstallprompt 事件的使用者手勢內呼叫 prompt()，即可顯示。

或

使用者在 Chrome 68 以上版本中輕觸迷你資訊列時顯示。

或

使用者在所有 Chrome 版本中，點選 Chrome 選單的「新增至主畫面」後，就會看到這個畫面。

迷你資訊列

迷你資訊列的螢幕截圖。
迷你資訊列

迷你資訊列是 Chrome 使用者介面元件，網站無法控制，但使用者可以輕鬆關閉。使用者關閉後，系統要過一段時間 (目前為 3 個月) 才會再次顯示。只要網站符合新增至主畫面條件，無論您是否 preventDefault() beforeinstallprompt 事件，都會顯示迷你資訊列。

網址列中安裝按鈕的早期概念。
網址列中安裝按鈕的早期概念
我們正努力在所有平台打造一致的體驗，包括在網址列中加入安裝按鈕，因此迷你資訊列是 Android 版 Chrome 的過渡期體驗。 ## 觸發「新增至主畫面」對話方塊
電腦版漸進式網頁應用程式的「安裝」按鈕。
電腦版漸進式網頁應用程式的「安裝」按鈕

您可以在頁面載入時顯示應用程式可安裝的 UI，然後顯示模態安裝提示，而不是在頁面載入時提示使用者 (這是權限要求反模式)。舉例來說，這個電腦版 PWA 會在使用者個人資料名稱上方新增「安裝應用程式」按鈕。

在使用者手勢後提示安裝應用程式，可減少使用者反感，並提高他們點選「新增」而非「取消」的可能性。在應用程式中加入「安裝」按鈕，即使使用者今天選擇不安裝，明天或日後準備安裝時，仍會看到該按鈕。

監聽 beforeinstallprompt 事件

如果網站符合新增至主畫面條件，Chrome 會觸發 beforeinstallprompt 事件、儲存事件的參照，並更新使用者介面，指出使用者可將應用程式新增至主畫面。

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

如果應用程式已安裝 (請參閱「加入主畫面」條件)，系統就不會觸發 beforeinstallprompt 事件。但如果使用者之後解除安裝應用程式，每次瀏覽網頁時，系統都會再次觸發 beforeinstallprompt 事件。

使用 prompt() 顯示對話方塊

「新增至主畫面」對話方塊。
「新增到主畫面」對話方塊

如要顯示「新增至主畫面」對話方塊，請在使用者手勢中，對已儲存的事件呼叫 prompt()。Chrome 會顯示模式對話方塊，提示使用者將您的應用程式新增至主畫面。然後，監聽 beforeinstallprompt 事件的 userChoice 屬性傳回的 Promise。提示顯示且使用者回應後，這個 Promise 會傳回含有 outcome 屬性的物件。

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

您只能對延遲事件呼叫一次 prompt()，如果使用者點選對話方塊中的「取消」，您必須等到下一個網頁導覽觸發 beforeinstallprompt 事件。與傳統權限要求不同，點選「取消」不會封鎖日後對 prompt() 的呼叫，因為必須在使用者手勢內呼叫該要求。

其他資源

如要瞭解詳情，包括：

  • beforeinstallprompt活動詳細資料
  • 追蹤使用者對「新增至主畫面」提示的回應
  • 追蹤應用程式是否已安裝
  • 判斷應用程式是否以已安裝應用程式的形式執行