_story.jpg)
Much like Google Chrome, Microsoft Edge receives new major releases roughly every four weeks. While Chrome 106 arrived yesterday, Edge 106 is not yet available. Ahead of its release, Microsoft has now detailed a new API in Edge 105 that makes desktop web apps more native.
Window Controls Overlay is a new Progressive Web Application (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 a trial Origin, Chrome actually adopting it with version 102 in May 2022. It has now become the default experience on Edge 105 as well with a formal specification released as well.
There has been a lot of effort on this front as it makes PWAs more native. And it doesn’t achieve that by making them more capable, but rather by providing a seemingly minor UX improvement. Instead of making an application’s title bar follow the OS defaults, it returns about 30 pixels in height to the PWA giving it nearly full control over the title bar.
Although 30 pixels seems small, it would give a PWA the autonomy to display custom titles, menu bars, navigation tabs, etc. in this domain. To give you a more visual representation, the white area in the diagram below would be controlled by the PWA:
Microsoft pointed out that this adapts to different operating systems, including Windows, Mac and Linux. A graph showing how using this 30px height can differ across operating systems can be seen below:
Microsoft says that:
We think PWAs are great for building desktop web apps. Turning your website into an app that really looks like it belongs on the desktop has never been easier and using the Window Control Overlay feature will help you create much more modern and engaging desktop apps for your users.
If you’re a PWA developer interested in checking out some code snippets to understand how you can change the title bar to your liking, check out Microsoft’s examples here.
Interestingly, Microsoft noted that Window Controls Overlay is now enabled by default in Edge 105, but none of its changelogs for major or minor releases for this release highlight it. We have to assume that if you are using the latest version of Edge, the API should be enabled by default for you.
