新增至主畫面行為的變更

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()，都會顯示。

當全域工具列安裝按鈕推出時，這個 UI 處理方式會在日後的 Chrome 版本中移除。

A2HS Dialog

A2HS 對話方塊螢幕截圖

在 Chrome 68 以上版本中，透過在 beforeinstallprompt 事件的使用者手勢中呼叫 prompt() 來顯示。

或

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

或

在所有 Chrome 版本中，當使用者在 Chrome 選單中按一下「Add to Home screen」時顯示。

迷你資訊列

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

迷你資訊列是 Chrome UI 元件，網站無法控制該元件，但使用者可以輕鬆關閉該元件。使用者關閉通知後，系統會等待一段時間 (目前為 3 個月) 才會再次顯示。當網站符合新增至主畫面的條件時，系統就會顯示迷你資訊列，無論您是否在 beforeinstallprompt 事件上 preventDefault()，都會顯示這項資訊。

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

您可以使用某些 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() 顯示對話方塊

「Add to Home screen」對話方塊。
新增至主畫面對話方塊

如要顯示「新增至主畫面」對話方塊，請在使用者手勢中對已儲存的事件呼叫 prompt()。Chrome 會顯示模式對話方塊，提示使用者將應用程式新增至主畫面。接著，請監聽 beforeinstallprompt 事件的 userChoice 屬性傳回的承諾。在提示顯示且使用者回應後，承諾會傳回具有 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 事件的詳細資料
  • 追蹤使用者對新增主畫面提示的回應
  • 追蹤應用程式是否已安裝
  • 判斷應用程式是否以已安裝的應用程式形式執行