Microsoft Edge can now make desktop web apps feel more native

Just like Google Chrome, Microsoft Edge gets new major releases roughly every four weeks. While Chrome 106 arrived yesterday, Edge 106 is yet to become available. Ahead of its release, Microsoft has now detailed a new API in Edge 105 that makes desktop web apps feel more native.

Window Controls Overlay is a new Progressive Web App (PWA) feature that Microsoft initially talked about in January 2020. The company then started working on an early implementation in March 2021 through the Chromium project followed by an Origin trial, with Chrome actually adopting it with version 102 in May 2022. It has now become the default experience on Edge 105 too with a formal specification being published too.

There has been much effort on this front because it makes PWAs feel more native. And it does not accomplish this by making them more performant, rather, it does this by making a seemingly minor UX enhancement. Instead of making the title bar of an app follow the operating system defaults, it returns around 30px of height back to the PWA by giving it almost full control over the title bar.

While 30px sounds small, it would give a PWA the autonomy to display custom titles, menu bars, navigation tabs, and more in this area. To give you a more visual representation, the white area in the diagram below would be controlled by the PWA:

Microsoft has emphasized that this adapts to different operating systems including Windows, Mac, and Linux. A graphic to show how the utilization of this 30px of height may differ across operating systems can be seen below:

Graphic showing height utilization difference between Window Controls Overlay on different OSes

Microsoft says that:

We believe PWAs are a great fit for making desktop web applications. Turning your website into an app that really feels like it belongs on desktop has never been so easy and using the Window Controls Overlay feature will help you create desktop apps that look much more modern and engaging to your users.

If you're a PWA developer interested in checking out some code snippets to figure out how you can tweak the title bar to your liking, view Microsoft's examples here.

Interestingly, Microsoft has noted that Window Controls Overlay is now enabled by default in Edge 105, but none of its changelogs for the major or minor releases of this version highlight this. We have to assume that if you're on the latest Edge build, the API should be enabled by default for you.