Developers always maximize even the smallest resource given. While 30 pixels may not seem like much, and in reality, it’s not, developers of Microsoft Progressive Web Apps (PWAs) are happy about it. PWAs are a growing style of app that offer several benefits to both developers and the end user. They are designed to work cross-platform meaning they work the same in a mobile or desktop interface. Making one app that spans multiple devices makes it easier for developers. PWAs aren’t perfect though, they often don’t feel like native apps built for the platform they are being run on.
\
Microsoft has worked really hard over the last few years to make PWAs feel more native and this next step called Window Control Overlay should help. You can read more about it in Microsoft’s blog post, but essentially developers now have 30 pixels to work with for a title bar.
\
\
\
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. 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!
\
\
In the past, PWA title bars have often been just wasted space or have often clashed colors with the app. Window Control Overlay helps solve that. Microsoft’s blog post covers how to implement the new feature and make sure it works across multiple operating systems and windows resize properly.
\
Window Control Overlay was introduced in January of 2020 and then implemented it in Chromium. Microsoft worked with several other tech companies to make it part of the Web Capabilities project to make it work.
\
Via Windows Central
\
Image Via Microsoft
\
\
\
\
