在 Chrome 76 中,你可以隱藏「新增到主畫面」迷你資訊列

Penny McLachlan
Penny McLachlan

漸進式網頁應用程式和迷你資訊列簡介

漸進式網頁應用程式 (PWA) 是一種模式,可建立類似應用程式、即時載入、可靠且可安裝的網站。

當 PWA 通過 Android 上的可安裝性檢查清單時,瀏覽器視窗底部會顯示名為「迷你資訊列」的 Chrome 系統對話方塊。

今天「新增到主畫面」迷你資訊列會與 beforeinstallprompt 事件同時顯示。

Chrome 76 版的變更

我們聽取社群意見後發現,開發人員希望進一步控管要求使用者安裝 PWA 的時機。我們聽到您的心聲了!

自 Chrome 76 起,您可以在 beforeinstallprompt 事件中呼叫 preventDefault(),禁止顯示迷你資訊列。

beforeinstallprompt 事件可協助您宣傳漸進式網頁應用程式的安裝作業,方便使用者將應用程式新增至主畫面。社群表示,使用者將 PWA 安裝到主畫面後,參與度會大幅提升,不僅會多次造訪,在應用程式中停留的時間也會變長,轉換率也會提高 (如適用)。

Pinterest 使用安裝橫幅宣傳 PWA 安裝功能的範例。
Pinterest 透過安裝橫幅宣傳 PWA 安裝功能。如要瞭解新增至主畫面流程的完整詳細資料 (包括程式碼範例和其他最佳做法),請參閱「新增至主畫面」。

如要在沒有迷你資訊列的情況下宣傳網頁應用程式,請監聽 beforeinstallprompt 事件,然後儲存該事件。接著,更新使用者介面,指出 PWA 可供安裝,例如新增安裝按鈕、顯示安裝橫幅、使用動態消息內促銷活動或選單選項。使用者點選安裝元素時,請在已儲存的 beforeinstallprompt 事件中呼叫 prompt(),顯示「新增至主畫面」模式對話方塊。

「新增至主畫面」迷你資訊列的未來發展

使用「新增至主畫面」資訊列仍是暫時措施。 我們正在實驗新的 UI 模式,讓漸進式網頁應用程式使用者能夠繼續安裝,同時減少瀏覽體驗中的雜亂感。