原生應用程式安裝提示

透過原生應用程式安裝提示，使用者可以直接在應用程式商店中快速輕鬆地安裝您的原生應用程式，不必離開瀏覽器，也不會顯示惱人的插頁式廣告。

資格條件為何？

您的網站必須符合下列條件，才能向使用者顯示原生應用程式安裝提示：

您符合這些條件時，就會觸發 beforeinstallprompt 事件。您可以使用它來提示使用者安裝您的原生應用程式。

必要的資訊清單屬性

如要提示使用者安裝原生應用程式，您必須在網頁應用程式資訊清單 (prefer_related_applications 和 related_applications) 中加入兩項屬性。

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

prefer_related_applications 屬性會指示瀏覽器透過原生應用程式 (而不是網頁應用程式) 提示使用者。如果未設定這個值或 false，瀏覽器會改為提示使用者安裝網頁應用程式。

related_applications 是包含物件清單的陣列，用來向瀏覽器說明您偏好的原生應用程式。每個物件都必須包含 platform 屬性和 id 屬性。其中 platform 為 play，id 則是您的 Play 商店應用程式 ID。

顯示安裝提示

如要顯示安裝對話方塊，您必須：

  1. 監聽 beforeinstallprompt 事件。
  2. 通知使用者可透過會產生使用者手勢事件的按鈕或其他元素安裝原生應用程式。
  3. 在已儲存的 beforeinstallprompt 事件上呼叫 prompt()，顯示提示。

聆聽beforeinstallprompt

如果符合條件，Chrome 會觸發 beforeinstallprompt 事件。您可以使用它來指出應用程式可以安裝，然後提示使用者進行安裝。

beforeinstallprompt 事件觸發時，請儲存事件的參照，並更新使用者介面，表示使用者可以安裝應用程式。

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

通知使用者應用程式可以安裝

如要通知使用者可以安裝您的應用程式，最好的方法是在使用者介面中新增按鈕或其他元素。不要顯示整頁的插頁式 或其他可能令人困擾或擾人的元素。

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

顯示提示

如要顯示安裝提示，請在使用者手勢中對已儲存的事件呼叫 prompt()。系統會顯示強制回應對話方塊，要求使用者將應用程式新增至主畫面。

然後監聽 userChoice 屬性傳回的 promise。承諾會在顯示提示且使用者回應後，傳回具有 outcome 屬性的物件。

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

在延遲事件中，prompt() 只能呼叫一次。如果使用者關閉事件，就必須等到下一個頁面導覽中的 beforeinstallprompt 事件觸發。

使用內容安全政策的特別注意事項

如果您的網站設有嚴格的內容安全政策，請務必在 img-src 指令中加入 *.googleusercontent.com，讓 Chrome 能夠從 Play 商店下載與應用程式相關聯的圖示。

在某些情況下，*.googleusercontent.com 可能比預期更詳細。Android 裝置提供遠端偵錯功能，可以判斷應用程式圖示的網址，藉此縮小這個範圍。