What you need to know
- Microsoft just released a feature for developers that helps Progressive Web Apps look more like native apps.
- The feature, called Window Controls Overlay, lets web apps customize the title bar.
- Microsoft explained that while the title bar area is small, having access to it is "huge" for PWAs.
Progressive Web Apps, also known as PWAs, are a growing category of web applications that provide several benefits to developers and end users. The cross-platform nature of PWAs makes them useful on mobile devices and desktops. Using them over other forms of apps also eases development strain since a single PWA can work on a wide range of devices. While there are many benefits to developing a PWA, there are still some drawbacks.
Progressive Web Apps can feel less native than applications built for specific platforms. Of course, that's in part because that's accurate. PWAs are, in essence, fancy web apps. But Microsoft has worked hard over the years to make PWAs look and feel more native. The company recently took another step toward improving Progressive Web Apps.
Developers can now customize the title bar area of PWAs. Microsoft announced the availability of the feature, called Window Control Overlay, and explained its benefits in a blog post.
"Even if the title bar is about 30 pixels high only, the design implications of having access to the area it normally occupies are huge," said Microsoft. "What can we do with just 30 pixels? Display a custom title, a menu bar, some account information, navigation tabs? Look at other desktop apps you use, and you’ll quickly realize that they all make use of this area in some way. And now, installed web apps can too!"
At minimum, the title bar of PWAs is often wasted space. In some instances, it can stick out quite a bit due to clashing colors. Window Control Overlay should fix these problems. "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," said Microsoft.
The company's blog post goes over how to implement the new feature and ensure that it adjusts to different operating systems and when windows are resized.
Window Control Overlay has been in the works for a long time. Microsoft proposed the feature in January 2020 and then built an implementation of it in Chromium. The tech giant then worked with several companies and browser makers as part of the Web Capabilities project to make it work.
