許多瀏覽器都可讓您啟用及提升安裝作業 。 安裝 (有時稱為「新增至主畫面」) 可讓使用者自行安裝 下載 PWA。安裝 PWA 會將其新增至使用者的 啟動器,讓應用程式可以像任何其他已安裝的應用程式一樣執行。
除了瀏覽器提供的安裝體驗之外, 您可以直接在應用程式中自訂安裝流程。
![Spotify PWA 中提供的「安裝應用程式」按鈕](https://web.developers.google.cn/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?authuser=19&hl=zh-tw)
在考慮是否要宣傳安裝時,請考慮使用者通常如何
使用您的 PWA。舉例來說,如果有一組使用者多次使用您的 PWA
這些使用者可能受益於
從手機主畫面或電腦的「開始」功能表啟動應用程式
以及作業系統部分效率提升和娛樂應用程式也能因此受益
將瀏覽器工具列從
已安裝 standalone
或 minimal-ui
模式的視窗。
必要條件
開始之前,請確認您的 PWA 符合 安裝需求,這類需求通常 包括擁有網頁應用程式資訊清單。
升級安裝作業
可以顯示您的漸進式網頁應用程式可安裝,並提供 應用程式內安裝流程:
- 監聽
beforeinstallprompt
事件。 - 儲存
beforeinstallprompt
事件,以便觸發安裝流程 - 提醒使用者您可以安裝 PWA,並提供按鈕或其他選項 元素,啟動應用程式內安裝流程。
監聽 beforeinstallprompt
事件
如果您的漸進式網頁應用程式符合必要的安裝條件,
瀏覽器會觸發 beforeinstallprompt
事件。儲存事件的參照。
並更新使用者介面,表明使用者可以安裝您的 PWA。
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
應用程式內安裝流程
如要提供應用程式內安裝,請提供按鈕或其他介面元素
讓使用者能點擊或輕觸安裝應用程式使用者點擊元素時
輕觸,並呼叫prompt()
儲存的beforeinstallprompt
活動 (儲存在
deferredPrompt
變數)。使用者會看到強制回應安裝對話方塊,
確認想要安裝您的 PWA。
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
userChoice
屬性是可讓使用者自行選擇問題的保證。
在延遲事件中,您只能呼叫 prompt()
一次。如果使用者
則必須等到 beforeinstallprompt
事件才能關閉
再次觸發,通常會在 userChoice
屬性之後立即觸發
已解決問題。
偵測 PWA 安裝成功的時間
您可以使用 userChoice
屬性來判斷使用者是否已安裝
存取應用程式不過,如果使用者安裝了您的 PWA
網址列或其他瀏覽器元件,userChoice
無法協助解決問題。
您應該改為監聽 appinstalled
事件,這個事件會在每次
無論您安裝 PWA 為何,系統都會照常安裝 PWA。
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
偵測 PWA 的啟動方式
CSS display-mode
媒體查詢會指出 PWA 的啟動方式。
安裝為瀏覽器分頁或已安裝的 PWA因此您可以
根據應用程式啟動方式
決定採用的樣式舉例來說,您可以設定
一律隱藏安裝按鈕,並在以
安裝 PWA。
追蹤 PWA 的啟動方式
如要追蹤使用者啟動 PWA 的情形,請使用 matchMedia()
測試
display-mode
媒體查詢。iOS 版 Safari 目前尚不支援這項功能,因此你必須
而是檢查 navigator.standalone
,這樣做會傳回布林值,指出
瀏覽器以獨立模式執行。
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
在顯示模式變更時追蹤
如要追蹤使用者是否在 standalone
和 browser tab
之間切換,請監聽
對「display-mode
」媒體查詢所做的變更。
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
根據目前的顯示模式更新 UI
在安裝時為 PWA 套用不同的背景顏色 PWA,請使用條件式 CSS:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
更新應用程式的圖示和名稱
如果需要更新應用程式名稱或提供新圖示,該怎麼辦? 請參閱 Chrome 如何處理網頁應用程式資訊清單的更新 即可在 Chrome 中瞭解變更生效的時間和方式。