Going native! Microsoft has enabled a new API in its Edge web browser, allowing web apps to feel more native via user interface adjustments.
Web apps, as in Progressive Web Apps, are also called PWAs.
The company labeled this new API as Window Controls Overlays, and it is now enabled by default in the web browser. It was implemented in Version 105, and the feature itself was a long time coming.
Microsoft initially discussed it in January 2020 before starting work on an early implementation in March 2021 through the Chromium project. The feature has now finally become the default experience on Edge 105, complete with a formal specification being published.
As Microsoft details:
“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.”
And all the effort on this front has been worth it, as this new addition makes PWAs feel more native.
This is not done by making them more performant; rather, it is done by making a seemingly minor UI enhancement. Instead of making an app’s title bar follow the operating system defaults, it returns around 30 pixels of height back to the PWA.
Essentially, giving the PWA almost full control over the title bar.
While this number sounds small, it does give a PWA the autonomy to display custom titles, menu bars, navigation tabs, and more in this area. This diagram above does a good job of illustrating how this new implementation looks.
Redmond emphasizes that this implementation adapts to different operating systems, including Windows, macOS, and Linux. The graphic below shows this.
If you are a PWA developer, Microsoft also has some handy code snippets to help you figure out how to tweak your web app’s title bar.
Interestingly, while this feature is here, none of the major or minor releases of Edge 105 highlight this new addition. The API is, however, enabled by default if you are on the latest build of the web browser and is a very welcome improvement.
