PWA & Install

Window Controls Overlay

Probing…

Window Controls Overlay is a web platform capability in the PWA & Install category. Draw into the title-bar area of the installed desktop app. Supported in Chromium 105+; not available in Firefox and Safari. Requires a secure context (HTTPS or localhost) and the site to be installed as an app.

Secure contextInstalled app

Try it

Loading demo…

Code

const wco = navigator.windowControlsOverlay
console.log('visible?', wco.visible)
console.log(wco.getTitlebarAreaRect())

wco.addEventListener('geometrychange', () => {
  console.log('now', wco.visible, wco.getTitlebarAreaRect())
})

Browser support

Chromium
105
Firefox
No
Safari
No

Frequently asked questions

Which browsers support Window Controls Overlay?

Supported in Chromium 105+; not available in Firefox and Safari.

Does Window Controls Overlay require HTTPS?

Yes. Window Controls Overlay needs a secure context, so it only works over HTTPS (or on localhost during development).

What is Window Controls Overlay used for?

Draw into the title-bar area of the installed desktop app.

Can I try Window Controls Overlay in my browser?

Yes. shwcs.net runs a live Window Controls Overlay demo that probes your current browser and lets you try the API. Everything runs locally — nothing is sent anywhere.

MDN reference ↗ Specification ↗