在不安裝 PWA 的情況下模擬 Window Controls Overlay API

在 DevTools 的應用程式工具中，你可以模擬 Progressive Web Apps (PWA) (WCO) 功能的視窗控制覆蓋層，無需先安裝 PWA 並啟用 WCO 功能。 透過在 DevTools 內模擬 WCO 功能，你可以比重新安裝修訂後的 PWA 更快測試標題列區域的 CSS 程式碼變更。

使用 PWA 中的 WCO 功能

在你的 Progressive Web App (PWA) ，使用 WCO) (視窗控制覆蓋層，控制目前以獨立顯示模式顯示的標題列區域。 視窗控制覆蓋層是一組功能，協同運作，提供應用程式視窗所需的基本控制。 這種版面設計能釋放更多空間給網頁內容層。 請參考 標題欄區域中使用視窗控制覆蓋區的顯示內容。

若想在 PWA 中模擬 Windows、Linux 和 macOS 的 WCO 功能，無需先安裝 PWA，請使用 DevTools 應用程式工具中的視窗控制覆蓋區段。

在 DevTools 中模擬視窗控制覆蓋層

1. 開啟一個 PWA) (Progressive 網頁應用程式，該應用程式使用視窗控制覆蓋層 (WCO) 功能。 例如，在新視窗或分頁開啟 1DIV 示範應用程式 ：

   

   視窗控制覆蓋層尚未顯示在網頁右上角。

2. 右鍵點擊網頁，然後選擇 檢查。 或者，在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。

3. 在 活動欄中，選擇 「申請 」標籤。如果該分頁看不到，請點擊 「更多工具 」 ) 按鈕，然後選擇 應用程式。

4. 在 應用程式 工具中，展開左上角的 Manifest ，然後選擇 視窗控制覆蓋層。

5. 在右側的視窗控制覆蓋區塊中，選擇「在平台上>模擬視窗控制覆蓋層<」的勾選框，然後選擇平台，例如 Windows、macOS 或 Linux。

   模擬的視窗控制覆蓋層會被加入渲染網頁：

   

   模擬的疊加圖是靜態影像。 CSS 變數 env(titlebar-area-left)、 env(titlebar-area-top)、 env(titlebar-area-width)的 env(titlebar-area-height) 值會設定為與你所選擇的平台相符。

另請參閱

• 在標題欄區域使用 Window Controls Overlay 顯示內容 ——這是 PWA 的 Window Controls Overlay 功能。
• 開發工具中 PWA 視窗控制覆蓋層的工具，見 DevTools (Microsoft Edge 121) 。