WindowControlsOverlay

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

TheWindowControlsOverlay interface of theWindow Controls Overlay API exposes information about the geometryof the title bar area in desktop Progressive Web Apps, and an event to know whenever it changes. This interface is accessible fromNavigator.windowControlsOverlay.

Instance properties

WindowControlsOverlay.visibleRead onlyExperimental: A Boolean that indicates whether the window controls overlay is visible or not.

Instance methods

WindowControlsOverlay.getTitlebarAreaRect()Experimental: Returns the size and position of the title bar.

Events

Listen to these events usingEventTarget.addEventListener() or by assigning an event listener to the relevantoneventname property of this interface.

geometrychangeExperimental: Fired when the geometry of the title bar area changes.

Examples

if ("windowControlsOverlay" in navigator) {  navigator.windowControlsOverlay.addEventListener(    "geometrychange",    (event) => {      if (event.visible) {        const rect = event.titlebarAreaRect;        // Do something with the coordinates of the title bar area.      }    },  );}