Window Controls Overlay API

啟用該功能

在使用此功能之前，必須滿足以下條件：

• Web 應用清單的 display_override 成員必須設定為 window-controls-overlay。
• 漸進式 Web 應用必須安裝在桌面作業系統上。

主要概念

安裝在桌面裝置上的漸進式 Web 應用可以像原生應用一樣，以獨立的應用程式視窗顯示。應用程式視窗的外觀如下：

如上所示，應用程式視窗由兩個主要區域組成：

• 頂部的標題欄區域。
• 底部的應用程式內容區域，顯示 PWA 的 HTML 內容。

標題欄區域包含系統關鍵的最大化、最小化和關閉按鈕（它們在不同作業系統上的位置可能不同），應用程式的名稱（來自頁面中的 <title> HTML 元素），以及可能的特定於使用者代理的 PWA 按鈕。

透過 Window Controls Overlay 功能，漸進式 Web 應用可以在整個應用程式視窗表面區域顯示其 Web 內容。由於視窗控制元件按鈕和特定於使用者代理的 PWA 按鈕必須保持可見，因此它們被變成顯示在 Web 內容之上的覆蓋層。

標題欄中通常包含應用程式名稱的部分被隱藏，其正常佔據的區域可以透過 Window Controls Overlay API 來使用。

PWA 可以使用該 API 在此區域定位內容，並避免內容被覆蓋的控制元件按鈕遮擋，這類似於 Web 作者如何考慮在某些移動裝置上劉海屏的存在。

CSS 環境變數

漸進式 Web 應用可以透過使用 titlebar-area-x、titlebar-area-y、titlebar-area-width 和 titlebar-area-height CSS 環境變數，將其 Web 內容定位在標題欄通常佔據的區域。請參閱 使用 env() 確保桌面 PWA 中的內容不被視窗控制元件按鈕遮擋。

介面

WindowControlsOverlay 實驗性

提供有關標題欄可見性和幾何形狀的資訊，以及一個用於獲知其何時更改的事件。

WindowControlsOverlayGeometryChangeEvent 實驗性

表示當桌面漸進式 Web 應用的標題欄區域的大小或可見性發生變化時，提供相關資訊的事件。

其他介面的擴充套件

Navigator.windowControlsOverlay

返回 WindowControlsOverlay 介面，該介面公開有關桌面漸進式 Web 應用標題欄幾何形狀的資訊。

規範

瀏覽器相容性

另見

• 自定義 PWA 標題欄的視窗控制元件覆蓋
• 突破界限
• 在標題欄中顯示內容