[TOC] # 網絡應用安裝橫幅 應用安裝橫幅有兩種：**網絡應用安裝橫幅**和**本機應用安裝橫幅**。 這兩種應用安裝橫幅讓您的用戶可以快速無縫地將您的網絡或本機應用添加到他們的主屏幕，無需退出瀏覽器。 添加應用安裝橫幅很輕松，Chrome 會為您處理大部分的繁重工作。 您需要在您的網站中添加一個包含您的應用詳細信息的網絡應用清單文件。 然后，Chrome 使用一組條件和訪問頻率啟發式算法來確定何時顯示橫幅。 請繼續閱讀以了解更多詳情。 > Note: Add to Homescreen（有時縮寫為 A2HS）是網絡應用安裝橫幅的另一個名稱。兩個術語相等同。  <br> ## 條件有哪些？ Chrome 將在您的應用符合以下條件時自動顯示橫幅： * Web應用程序尚未安裝 * 滿足用戶參與啟發式（目前，用戶與域進行了交互至少30秒） * 擁有一個manifest文件，該文件具有： * short_name 或 name * 一個 192x192 png 圖標（圖標聲明必須包含一個 mime 類型的 `image/png`） * `start_url` * display必須是以下之一：`fullscreen`，`standalone` 或 `minimal-ui` * 通過 HTTPS 提供（用于 `server workers`）。 * 已使用 `fetch` 事件處理程序注冊了 `server workers` 滿足這些條件后，Chrome將觸發 `beforeinstallprompt` 事件，您可以使用該事件提示用戶安裝 `Progressive Web App` 。 > 注意：其他瀏覽器具有不同的安裝標準，或觸發beforeinstallprompt事件。 查看各自的站點以獲取完整詳細信息：[Edge](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps#requirements)，[Firefox](https://developer.mozilla.org/en-US/Apps/Progressive/Add_to_home_screen#How_do_you_make_an_app_A2HS-ready)，Opera，Samsung Internet和[UC Browser](https://plus.ucweb.com/docs/pwa/docs-en/zvrh56)。 If the web app manifest includes related_applications and has "prefer_related_applications": true, the native app install prompt will be shown instead. 如果 `web app manifest`包含 `related_applications` 且 具有 `"prefer_related_applications": true`，則將顯示本機應用程序安裝提示。 <br> ## 顯示“添加到主屏幕”對話框 要顯示“添加到主屏幕”對話框，您需要： * 偵聽 `beforeinstallprompt` 事件 * 通知用戶您的應用程序可以使用按鈕或其他元素安裝，這將生成用戶手勢事件。 * 通過在已保存的 `beforeinstallprompt` 事件上調用 `prompt()` 來顯示提示。  > 注意：Chrome 67及更早版本顯示“添加到主屏幕”橫幅。 它已在Chrome 68中刪除。 ### 監聽beforeinstallprompt 如果符合添加到主屏幕條件，則Chrome將觸發 `beforeinstallprompt` 事件，您可以使用該事件指示您的應用可以“安裝”，然后提示用戶進行安裝。 觸發 `beforeinstallprompt` 事件后，保存對事件的引用，并更新用戶界面以指示用戶可以將應用程序添加到其主屏幕。 ``` let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { // 防止Chrome 67及更早版本自動顯示提示 e.preventDefault(); // 存儲事件，以便稍后觸發。 deferredPrompt = e; }); ``` ### 通知用戶您的應用程序可以安裝 通知用戶可以安裝應用程序的最佳方法是在用戶界面中添加按鈕或其他元素。 不要顯示整頁插頁式廣告或其他可能令人討厭或分散注意力的元素。 ``` let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { // 防止Chrome 67及更早版本自動顯示提示 e.preventDefault(); // 存儲事件，以便稍后觸發。 deferredPrompt = e; // 更新UI通知用戶可以添加到主屏幕 btnAdd.style.display = 'block'; }); ``` ### 顯示提示 要顯示添加到主屏幕提示，請在用戶手勢內對已保存事件調用 `prompt()`。 它將顯示一個模態對話框，要求用戶將您的應用添加到他們的主屏幕。 然后，監聽 `userChoice` 屬性返回的 `promise`。 在提示顯示并且用戶已對其作出響應后，`promise`將返回帶有 `outcome` 屬性的對象。 ``` btnAdd.addEventListener('click', (e) => { // hide our user interface that shows our A2HS button btnAdd.style.display = 'none'; // Show the prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt deferredPrompt.userChoice .then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { console.log('User dismissed the A2HS prompt'); } deferredPrompt = null; }); }); ``` 您只能在延遲事件上調用一次prompt()。如果用戶將其解除，則您需要等到下一頁導航中觸發 `beforeinstallprompt` 事件。 ## 迷你信息欄 `mini-infobar` 是 Chrome 在 Android 上的臨時體驗，因為我們致力于在所有平臺上創建一致的體驗，其中包括多功能框中的安裝按鈕。 迷你信息欄是Chrome UI組件，不受網站控制，但可以被用戶輕松解除。 一旦被用戶解除，在經過足夠的時間（目前為3個月）之后，它將不再出現。 無論您是否在beforeinstallprompt事件上阻止了默認（），當站點滿足添加到主屏幕標準時，將顯示迷你信息欄。 > Chrome操作系統上不顯示迷你信息欄。 ## 確定應用程序是否已成功安裝 要確定應用程序在接受提示后是否已成功添加到用戶的主屏幕，您可以偵聽 `appinstalled ` 事件。 ~~~ window.addEventListener('appinstalled', (evt) => { app.logEvent('a2hs', 'installed'); }); ~~~ <br> ## 檢測您的應用是否從主屏幕啟動 ### **display-mode** 媒體查詢 `display-mode` 媒體查詢可以根據應用程序的啟動方式使用樣式，或使用JavaScript確定如何啟動樣式。 要使用 `“display”：“standalone”` 從主屏幕啟動時為上面的應用程序應用不同的背景顏色，使用條件CSS： ~~~ @media all and (display-mode: standalone) { body { background-color: yellow; } } ~~~ 也可以通過JavaScript檢測顯示模式是否是 `display-mode`： ``` if (window.matchMedia('(display-mode: standalone)').matches) { console.log('display-mode is standalone'); } ``` ### Safari 要確定應用程序是否在Safari中以**獨立**模式啟動，您可以使用JavaScript來檢查： ``` if (window.navigator.standalone === true) { console.log('display-mode is standalone'); } ``` <br> ## 更新應用的圖標和名稱 如果您更改了清單中的任何屬性，那么這些更改將在用戶再次運行您的應用后反映給用戶。 > 提示：圖標可能會被緩存，因此在更新圖標或其他圖形時更改文件名可能會有所幫助。 <br> ## 測試添加主屏幕的體驗 您可以使用Chrome DevTools手動觸發 `beforeinstallprompt` 事件。 這使得可以查看用戶體驗，了解流程如何工作或調試流程。 如果不符合PWA標準，Chrome將在控制臺中拋出異常，并且不會觸發該事件。 > 警告：Chrome的桌面和移動安裝流程略有不同。 雖然說明相似，但在移動設備上進行測試需要遠程調試; 沒有它，Chrome將使用桌面安裝流程。 Chrome OS 打開Chrome DevTools 進入 **Application** 面板 進入 **Manifest** tab 點擊 **Add to home screen** > 要在Mac或Windows上測試Desktop Progressive Web Apps的安裝流程，您需要啟用#enable-desktop-pwas標志。 是否會觸發beforeinstallprompt？ 測試是否會觸發beforeinstallprompt事件的最簡單方法是使用Lighthouse來審核您的應用，并檢查用戶可以提示安裝Web App測試的結果。 ## 參考資料 [網絡應用安裝橫幅（英文 2018.9.14更新）](https://developers.google.com/web/fundamentals/app-install-banners/)