在 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 模式,讓漸進式網頁應用程式使用者能繼續安裝應用程式,並以減少瀏覽體驗雜亂的方式執行此操作。