Window Controls
This feature is not (yet) supported on your device
This feature is desktop only.
The Window Controls Overlay API enables PWAs on desktop to display content in the title bar.
On a supporting device, click the chevron ("^") in the top-right corner of the screen indicated by the red arrow
to toggle the default title bar and show search input. You can now search for a demo and click the search results
to navigate directly to the demo.
In addition, the title bar area containing the search input has its window-drag CSS property set to
move so dragging it with the mouse will move the application window.
// manifest.json
"display_override": "window-controls-overlay"
/*
* the following CSS environment variables are used to size and position
* the content that is placed in the window controls
* area:
* - titlebar-area-x
* - titlebar-area-y
* - titlebar-area-width
* - titlebar-area-height
*/
.window-controls {
position: fixed;
left: env(titlebar-area-x);
top: env(titlebar-area-y);
width: env(titlebar-area-width);
height: env(titlebar-area-height);
window-drag: move;
}
// the "geometrychange" event is fired when the size or visibility of the
// title bar area changes
navigator.windowControlsOverlay.addEventListener("geometrychange",
(event) => {
if (event.visible) {
// titlebarAreaRect returns the size and coordinates of the
// title bar area.
const rect = event.titlebarAreaRect;
}
},
);
