Make your desktop PWAs feel like native apps. The window-controls-overlay API lets you render custom UI directly into the operating system's title bar, seamlessly blending alongside macOS traffic lights or Windows window controls.
By default, when a PWA is installed on a desktop operating system, the browser provides a standard title bar containing the app title and window controls (minimize, maximize, close). The `window-controls-overlay` API allows developers to reclaim this space, extending their app's canvas all the way to the top of the window while the OS floats its native controls on top of the content.
macOS places its "traffic light" controls on the top-left, while Windows places its control box on the top-right. To prevent your custom UI (like a search bar) from rendering underneath these native buttons, the browser exposes variables like env(titlebar-area-width) and env(titlebar-area-x). These dynamically calculate the exact "safe area" available on the user's specific operating system.
When you replace the native title bar, users still need a way to click and drag to move the application window around their screen. By applying app-region: drag to a container, you tell the OS to treat that area as a draggable handle. Conversely, you must apply app-region: no-drag to any buttons or inputs inside that area, otherwise clicks will be intercepted by the drag behavior.
With Progressier, you can generate a manifest with the window-controls-overlay display mode without code.
Generate PWA See plans