Progressive web apps on Windows look more like native Windows apps than ever before. Thanks to a new feature that Microsoft just announced, the Window Controls Overlay, developers can now customize the title bar of their PWAs.
Web apps on Windows are getting closer to their native counterparts
The new Window Controls Overlay gives PWAs (almost) full access to the title bar
The new Window Controls Overlay gives PWAs (almost) full access to the title bar
Previously, web apps did not have access to this feature, which could lead to empty space, clashing colors, and other oddities that made some PWAs look decidedly un-app-like. The new feature should help developers fix these problems. Web apps now have access to the “full surface area” of their app window, excluding only the buttons in the top-right corner — minimize, etc. remain untouchable.
“Recently, with many new web capabilities in the Chromium browser engine and UX changes in Microsoft Edge and on Windows, installed desktop web apps are really starting to look and feel like native apps,” writes senior program manager Patrick Brosset in a blog post for Microsoft. “While native apps have been able to display content anywhere in the app window, including in the title bar, installed web apps have been forced to go with the default experience, making them visually different. We’re excited to announce the availability of a new PWA feature that closes this gap and helps blur the line between apps and websites even more.”
This may not be shocking news to anyone who regularly uses PWAs. Microsoft developers originally proposed the feature in January 2020, showcasing it with a demo web app. Chrome began supporting the Window Controls Overlay as a beta feature in April, and the feature made it into Chrome 105 back in August. With Chrome and Edge both now supporting the tool, it seems like this new look for web apps may become fairly widespread.
“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,” Microsoft’s post reads.
Those interested in learning more about the Window Controls Overlay can read Microsoft’s technical documentation and MDN reference documents. Microsoft’s blog post also includes more detailed instructions for how to opt in to and implement the feature.
Follow topics and authors from this story to see more like this in your personalized homepage feed and to receive email updates.
