BeforeInstallPromptEvent

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。

BeforeInstallPromptEvent 是在使用者被提示將網站“安裝”到移動裝置主螢幕之前,在 Window 物件上觸發的 beforeinstallprompt 事件的介面。

此介面繼承自 Event 介面。

Event BeforeInstallPromptEvent

建構函式

BeforeInstallPromptEvent() 非標準 實驗性

建立一個新的 BeforeInstallPromptEvent 物件。

例項屬性

繼承其父級 Event 的屬性。

BeforeInstallPromptEvent.platforms 只讀 非標準 實驗性

返回一個字串陣列,其中包含事件分派到的平臺。這供希望向使用者提供版本選擇的使用者代理使用,例如,“web”或“play”,允許使用者在 Web 版本和 Android 版本之間進行選擇。

BeforeInstallPromptEvent.userChoice 只讀 非標準 實驗性

返回一個 Promise,該 Promise 解析為一個物件,描述使用者在被提示安裝應用時的選擇。

例項方法

BeforeInstallPromptEvent.prompt() 非標準 實驗性

顯示一個提示,詢問使用者是否要安裝應用。此方法返回一個 Promise,該 Promise 解析為一個物件,描述使用者在被提示安裝應用時的選擇。

示例

在以下示例中,一個應用提供自己的安裝按鈕,其 id"install"。最初,該按鈕是隱藏的。

html
<button id="install" hidden>Install</button>

beforeinstallprompt 處理程式

  • 取消事件,這會阻止瀏覽器在某些平臺上顯示其自身的安裝 UI。
  • BeforeInstallPromptEvent 物件分配給一個變數,以便以後使用。
  • 顯示應用的安裝按鈕。
js
let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

當點選時,應用的安裝按鈕

  • 呼叫已儲存事件物件的 prompt() 方法,以觸發安裝提示。
  • 透過清除 installPrompt 變數並再次隱藏自身來重置其狀態。
js
installButton.addEventListener("click", async () => {
  if (!installPrompt) {
    return;
  }
  const result = await installPrompt.prompt();
  console.log(`Install prompt was: ${result.outcome}`);
  installPrompt = null;
  installButton.setAttribute("hidden", "");
});

瀏覽器相容性

另見