Microsoft Edge will soon introduce a new feature called Window Controls Overlay to make Progressive Web Apps (PWAs) visually indistinguishable from their native counterparts, enabling developers to customize the title bar area of their PWAs.
[Listen to this article on Spotify]
"This feature enables developers to build web apps which make better use of screen space and allows them to design their app to feel more like a native app. As devices become smaller for portability, the title bar consumes a larger fraction of the screen, leaving less room for the user to interact with the app," Microsoft Edge's Amanda Baker said in a technical document seen by Techtsp.
Edge is trying to solve one of the biggest problems with Progressive Web Apps: the lack of customization of the title bar area. Unlike native apps, which come with a customizable title bar, PWAs have a title bar section reserved by the system. As a result, PWAs end up looking like they are running on in a separate Edge window.
"If the user has a visual impairment and increases the zoom level of all content on the screen, this is even more of an issue," Baker added.
Microsoft has realized this old design prevents Progressive Web Apps developers from fully utilizing the display real estate. More importantly, it prevents PWA developers from providing their users with the best possible UI experience. This lack of control has been one reason why customers do not move to PWAs from regular web pages and native apps.
"Instead of leaving most of the title bar as empty space and including the title of the app in the standard browser font, a developer can fill this area with the content that they usually place just below it: a custom logo, a search box, or navigation controls for example," Baker added.
The new project comes with three significant goals:
- Web developers should have access to the title bar area of a Progressive Web App.
- The app window must have control options, including basic controls like minimize, close, and drag-window.
- Edge should offer window controls design according to the host operating system.
All these features would work hand in hand so that PWA developers can provide the closest-to-native user experience to customers. The UX would also include buttons and other interactive elements on the title bar area.
The developers working on the feature have already released the basic code required to build a PWA with a customizable title bar area. However, it may be a few weeks or months until we see its adoption by web developers.
Since both Edge and Chrome are based on Chromium, both browsers will support PWAs with a custom title bar area. Regardless of when it happens, the new feature will attract more customers to PWAs since they can offer a more comprehensive User Experience, among other benefits.
The Windows Control Overlay feature is currently available behind chrome://flags.
Also Read
Comments
Post a Comment