Window Controls Overlay for Installed Desktop Web Apps

Category: Miscellaneous
Type: New or changed feature
Status: Enabled by default (Chrome 105)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Chromium flag: #enable-desktop-pwas-window-controls-overlay
Spec maturity: Pre-incubation
Web Platform Tests: No

WPT details: N/A not implemented

Summary

When the window controls overlay is enabled for installed desktop web apps, the app's client area is extended to cover the entire window--including the title bar area--and the window control buttons (close, maximize/restore, minimize) are overlaid on top of the client area. The web app developer is responsible for drawing and input-handling for the entire window except for the window controls overlay.

Motivation

Developers can use this feature to make their installed desktop web apps look like native app.

Standards & signals

Firefox: No signal
Safari: No signal
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=937121

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=window-controls-overlay-for-installed-desktop-web-apps
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Window%20Controls%20Overlay%20for%20Installed%20Desktop%20Web%20Apps
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Window%20Controls%20Overlay%20for%20Installed%20Desktop%20Web%20Apps
Baseline status: https://webstatus.dev/?q=Window%20Controls%20Overlay%20for%20Installed%20Desktop%20Web%20Apps

Docs: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md

Samples: https://amandabaker.github.io/pwa/explainer-example/index.html

Explainers: https://github.com/WICG/window-controls-overlay/blob/master/explainer.md

View on chromestatus.com