這個錯誤包含網頁資訊清單,其中包含必要欄位,可讓網頁應用程式可安裝。
並提供預設隱藏的安裝按鈕。
監聽 beforeinstallprompt 事件
當瀏覽器觸發 beforeinstallprompt
事件時,表示可以安裝網頁應用程式,並向使用者顯示安裝按鈕。當應用程式符合可安裝性條件時,系統就會觸發 beforeinstallprompt
事件。
擷取事件後,開發人員就能自訂安裝程序,並在他們認為最適當的時機提示使用者安裝。
- 按一下「Remix to Edit」,即可編輯專案。
- 將
beforeinstallprompt
事件處理常式新增至window
物件。 - 將
event
儲存為全域變數,我們稍後會用它顯示提示。 - 顯示安裝按鈕。
代碼:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
處理安裝按鈕的點擊事件
如要顯示安裝提示,請對已儲存的 beforeinstallprompt
事件呼叫 prompt()
。呼叫 prompt()
是在安裝按鈕點按處理常式中完成,因為 prompt()
必須透過使用者手勢呼叫。
- 為安裝按鈕新增點擊事件處理常式。
- 在已儲存的
beforeinstallprompt
事件上呼叫prompt()
。 - 記錄提示的結果。
- 將已儲存的
beforeinstallprompt
事件設為空值。 - 隱藏安裝按鈕。
代碼:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
追蹤安裝事件
使用者安裝網頁應用程式的方式不只透過安裝按鈕,使用者也可以透過 Chrome 選單、迷你資訊列和網址列中的圖示進行操作。您可以監聽 appinstalled
事件,追蹤所有這些安裝方式。
- 將
appinstalled
事件處理常式新增至window
物件。 - 將安裝事件記錄到數據分析或其他機制。
代碼:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
延伸閱讀
恭喜!您的應用程式現在可供安裝!
以下是其他可行做法: