Web apps now feel more native on Edge

Edge Web

Going native! Microsoft has enabled a new API in its Edge web browser that allows web apps to feel more native via user interface adjustments.

Web apps, as in Progressive Web Apps, also called PWAs.

The company labeled this new API as Window Controls Overlays, and it is now enabled by default in the web browser. Version 105 is where you will find it implemented, with the feature itself being a long time coming.

Edge Web App UI

Microsoft initially talked about it all the way back in January 2020, before staring 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. That being, instead of making the title bar of an app follow the operating system defaults, it returns around 30 pixels of height back to the PWA.

Essentially, giving the PWA almost the full control over the title bar.

Edge Web App UI New

While this number sound 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.

Edge Web App UI Comparison

If you are a PWA developer, Microsoft also has some handy code snippets to help you figure out how you can tweak the title bar of your web app.

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.