新增至主畫面行為的變更

Pete LePage

自從推出新增至主畫面橫幅後，我們一直致力為 Progressive Web Apps 加上標籤，並簡化使用者的安裝方式。我們的最終目標是，在所有平台的網址列中提供安裝按鈕；而在 Chrome 68 版中，我們會針對該目標進行調整。

異動內容

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

A2HS 橫幅 Chrome 67 以下版本

A2HS 橫幅螢幕截圖

當網站符合新增至主畫面條件，且網站並未在 beforeinstallprompt 事件上呼叫 preventDefault() 時，會自動顯示。

或

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

Mini-infobar Chrome 68 以上版本

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

如果使用者關閉對話方塊，要等待一段時間 (約 3 個月) 才會看到這個按鈕。

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

日後的 Chrome 版本推出網址列安裝按鈕時，將會移除這項 UI 處理方式。

A2HS 對話方塊

A2HS 對話方塊螢幕截圖

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

或

在 Chrome 68 以上版本中輕觸小型資訊列時顯示。

或

在所有 Chrome 版本中，使用者點選 Chrome 選單中的「新增至主畫面」後才會顯示。

迷你資訊列

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

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

網址列中安裝按鈕的早期概念。
網址列中安裝按鈕的早期概念
迷你資訊列是適用於 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() 一次，如果使用者點選對話方塊上的「Cancel」選項，請等到下一個頁面導覽上觸發 beforeinstallprompt 事件。與傳統權限要求不同，點選「取消」不會封鎖日後對 prompt() 的呼叫，因為必須在使用者手勢內呼叫呼叫。

其他資源

詳情請參閱應用程式安裝橫幅廣告，包括：

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