Edit

Share via

Simulate the Window Controls Overlay API without installing your PWA

  • Article

In DevTools, in the Application tool, you can simulate the Window Controls Overlay (WCO) feature that Progressive Web Apps (PWAs) have, without having to install the PWA first and enable the WCO feature. By simulating the WCO feature from within DevTools, you can test CSS code changes for your title bar area more quickly than by re-installing the revised PWA.

The 'Window Overlay Controls' section in the Application tool

Using the WCO feature in your PWA

In your Progressive Web App (PWA), use the Window Controls Overlay (WCO) to have control over the title bar area that's currently displayed in standalone display mode. Window Controls Overlay is a set of features that work together to provide just the essential controls needed for the app window. This layout frees up more space for the web content layer. See Display content in the title bar area using Window Controls Overlay.

To simulate the WCO feature for Windows, Linux, and macOS in your PWA without having to install the PWA first, use the Window Controls Overlay section of the Application tool in DevTools.

Simulate the Window Controls Overlay in DevTools

  1. Open a Progressive Web App (PWA) that uses the Window Controls Overlay (WCO) feature. For example, open the 1DIV demo app in a new window or tab:

    1DIV demo app

    The Window Controls Overlay is not yet displayed in the upper right of the webpage.

  2. Right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  3. On the Activity Bar, select the Application tab. If that tab isn't visible, click the More tools (More tools icon) button, and then select Application.

  4. In the Application tool, expand Manifest in the upper left, and then select Window Controls Overlay.

  5. In the Window Controls Overlay section on the right, select the checkbox Emulate the Window Controls Overlay on <platform>, and then select a platform, such as Windows, macOS, or Linux.

    The simulated Window Controls Overlay is added to the rendered web page:

    Overlay of window controls in upper right of demo webpage

    The simulated overlay is a static image. The values of the CSS variables env(titlebar-area-left), env(titlebar-area-top), env(titlebar-area-width), and env(titlebar-area-height) are set to match the platform that you selected.

See also