Window：beforeinstallprompt 事件
當瀏覽器檢測到網站可以作為漸進式 Web 應用程式（PWA）安裝時，會觸發 beforeinstallprompt 事件。
此事件觸發的時間不確定，但通常在頁面載入時發生。
此事件的典型用途是當 Web 應用程式想要提供自己的應用內 UI，邀請使用者安裝應用程式，而不是使用瀏覽器提供的通用 UI。這使得應用程式能夠提供更多關於應用程式的上下文，向用戶解釋他們可能想要安裝它的原因。
在這種情況下，此事件的處理程式將：
- 保留傳入的
BeforeInstallPromptEvent物件的引用。 - 顯示其應用內安裝 UI（預設應隱藏，因為並非所有瀏覽器都支援安裝）。
當用戶使用應用內安裝 UI 安裝應用程式時，應用內安裝 UI 會呼叫保留的 BeforeInstallPromptEvent 物件的 prompt() 方法來顯示安裝提示。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("beforeinstallprompt", (event) => { })
onbeforeinstallprompt = (event) => { }
事件型別
一個 BeforeInstallPromptEvent。繼承自 Event。
事件屬性
繼承其父級 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", "");
});
規範
| 規範 |
|---|
| 清單孵化 # onbeforeinstallprompt-attribute |
瀏覽器相容性
載入中…