新增至主畫面行為的變更

自從推出新增至主畫面橫幅以來，我們一直致力將漸進式網頁應用程式加上標籤，並簡化使用者的安裝方式。我們的最終目標是在所有平台的網址列提供安裝按鈕，而 Chrome 68 版本也正朝這個目標進行調整。

異動內容

從 Android 版的 Chrome 68 (2018 年 7 月穩定版) 起，Chrome 將不再顯示「新增至主畫面」橫幅。如果網站符合新增至主畫面的條件，Chrome 會顯示迷你資訊列。這樣一來，如果使用者按一下迷你資訊列，或是在 beforeinstallprompt 事件中透過使用者手勢呼叫 prompt()，Chrome 就會顯示互動視窗「新增至主畫面」對話方塊。

迷你資訊列

迷你資訊列是 Chrome UI 元件，網站無法控制，但使用者可以輕易關閉。使用者將其關閉後，要等到足夠的時間 (目前為 3 個月) 後才會再次顯示。網站符合新增至主畫面條件時，無論您是否在 beforeinstallprompt 事件中 preventDefault()，網站都會顯示迷你資訊列。

mini-資訊列是 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 屬性傳回的承諾內容。保證會在提示顯示且使用者做出回應後，傳回具有 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」事件的詳細資料
• 追蹤使用者對新增主畫面提示的回應
• 追蹤應用程式是否已安裝
• 判斷應用程式是否以安裝版應用程式的形式執行