For a while now, Microsoft has tried to make progressive web apps (PWAs) from its Edge browser feel more like native Windows apps, such as by making them appear in the Start menu alongside regular apps. Now, it looks as though work is being done to improve the way PWAs look once they"re open and in use, thanks to a new Window Controls Overlay feature (spotted by Techtsp), which is meant to help PWAs look more like native apps.
The Window Controls Overlay feature is being developed by a team at Microsoft, which has created a GitHub repository explaining the feature, but it"s being contributed directly to the Chromium project, meaning Chrome users will also benefit from it once it"s fully implemented. The team believes that there"s no great approach to implementing a PWA"s UI on desktops at this time, because developers have to choose between removing all of the browser"s UI elements (including the window controls in the top corner) or keeping the full title bar, as seen below.
The fullscreen option is only used on mobile devices powered by Android or iOS, since those platforms already don"t have the need for a close or minimize button. On desktop devices, when a PWA is open using a browser such as Edge or Chrome, the content of the app is hosted below the title bar, which has an area specifically reserved for it. This means that content in the app is limited to the area below the title bar and that space can"t be used for things like menus or quick shortcuts, which many native apps do.
With Window Controls Overlay, a new approach is created, where developers can make use of the full window area to display content, but the window controls are overlaid on top of it in accordance with the operating system"s usual look. As such, UI elements in PWAs can be pushed into the title bar, and developers will only need to work around the area reserved for the window controls, as they would with a regular app. Microsoft gives a few examples of apps built on Electron that have menu items next to the window controls, like Microsoft Teams or Spotify, and this would allow browser-based apps to do the same.
The feature is still in development, and it will also be up to each website to implement the improved design once it"s available, so it may be some time before we see the effects of this new approach in action. However, support for Window Controls Overlay can already be enabled in Chrome Canary as a feature flag in chrome://flags. Edge Canary doesn"t have the same flag just yet based on our testing, but it should show up sometime soon.