許多瀏覽器可讓您直接在使用者介面中啟用及宣傳漸進式網頁應用程式 (PWA) 的安裝作業。安裝 (有時稱為「新增至主畫面」) 可讓使用者自行安裝 下載 PWA。安裝 PWA 會將其新增至使用者的 啟動器，讓應用程式可以像任何其他已安裝的應用程式一樣執行。
除了瀏覽器提供的安裝體驗之外， 您可以直接在應用程式中自訂安裝流程。
在考慮是否要宣傳安裝時，請考慮使用者通常如何
使用您的 PWA。舉例來說，如果有一組使用者多次使用您的 PWA
這些使用者可能受益於
從手機主畫面或電腦的「開始」功能表啟動應用程式
以及作業系統部分效率提升和娛樂應用程式也能因此受益
將瀏覽器工具列從
已安裝 standalone、minimal-ui 或 window-control-overlay 模式的視窗。
必要條件
開始之前，請確認您的 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 安裝就會觸發。
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 媒體查詢。
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
追蹤顯示模式變更
如要追蹤使用者是否在 browser 和其他顯示模式之間變更，請監聽 display-mode 媒體查詢的變更。
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
根據目前的顯示模式更新 UI
如要讓 PWA 在以已安裝的 PWA 形式啟動時套用不同的背景顏色，請使用條件式 CSS：
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
更新應用程式的圖示和名稱
如果需要更新應用程式名稱或提供新圖示，該怎麼辦？ 請參閱 Chrome 如何處理網頁應用程式資訊清單的更新 即可在 Chrome 中瞭解變更生效的時間和方式。