If you're using Progressier, choosing Window controls overlay as a Desktop display mode at App Manifest > Preferences will add the following line to your app manifest:

display_override: ["window-controls-overlay"]

What it's for

Enabling this feature allows you to override the title bar with your own controls. The title bar is specifically the section in red below (macOS and Windows):

When the feature is enabled, the area in red above disappears completely. This allows you to make your PWA feel more native by replacing this section with custom controls for your app. Here are some examples of interfaces you can build with this feature:

Examples

Audio controls:

A search bar:

A menu bar:

How to position your own controls

Use CSS environment variables to position your own controls where the title bar would otherwise appear. Also, make sure its background color is the same as the theme_color of your app.

#your-own-window-controls { 
   position: fixed;
   left: env(titlebar-area-x, 0);
   top: env(titlebar-area-y, 0); 
   width: env(titlebar-area-width, 100%); 
   height: env(titlebar-area-height, 33px); 
   background:#fff;
}

You may also want to hide these controls completely if your app is not open in its own window or if the standard title bar is still visible. This can be achieved by hiding your controls by default and only displaying them when the display-mode becomes window-controls-overlay:

#your-own-window-controls { 
   display:none;
}
@media (display-mode: window-controls-overlay) { 
    #your-own-window-controls { 
       display: flex;
    }
}