原生應用程式安裝提示

原生應用程式安裝提示可讓使用者直接從應用程式商店在裝置上快速安裝原生應用程式，無須離開瀏覽器，也不會顯示惱人的插頁廣告。

評估標準

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

當您符合這些條件時，系統就會觸發 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 屬性傳回的承諾。提示顯示並由使用者回應後，承諾會傳回具有 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 事件。

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

如果您的網站採用限制性的內容安全性政策，請務必將 *.googleusercontent.com 新增至 img-src 指令，讓 Chrome 從 Play 商店下載與應用程式相關聯的圖示。

在某些情況下，*.googleusercontent.com 可能會比預期的冗長。您可以透過遠端偵錯 Android 裝置，判斷應用程式圖示的網址，藉此縮小範圍。