Microsoft Edge can now make desktop web apps feel more native – Neowin

Microsoft Edge can now make desktop web apps feel more native – Neowin

Microsoft Edge can now make desktop web apps feel more native – Neowin 0 0 Alan Dickson

18 minutes ago
34 minutes ago
50 minutes ago
50 minutes ago
2 hours ago
9 hours ago
10 hours ago
19 hours ago
22 hours ago
Sep 27, 2022
Sep 27, 2022
Sep 26, 2022
4 hours ago
4 hours ago
6 hours ago
Sep 27, 2022
1 hour ago
2 hours ago
3 hours ago
4 hours ago
Sep 3, 2022
Aug 28, 2022
Aug 14, 2022
Jun 11, 2022
Sep 11, 2022
Aug 15, 2022
Jul 31, 2022
May 8, 2022
Sep 19, 2022
Sep 15, 2022
Sep 15, 2022
Sep 15, 2022
May 15, 2021
Apr 27, 2021
Apr 10, 2021
Apr 3, 2021
19 hours ago
23 hours ago
Sep 27, 2022
Sep 26, 2022
Sep 25, 2022
Sep 11, 2022
Aug 13, 2022
Aug 9, 2022
2 hours ago
Sep 27, 2022
Sep 26, 2022
Sep 25, 2022
Neowin · Sep 28, 2022 03:16 EDT with 5 comments
Just like Google Chrome, Microsoft Edge gets new major releases roughly every four weeks. While Chrome 106 arrived yesterday, Edge 106 is yet to become available. Ahead of its release, Microsoft has now detailed a new API in Edge 105 that makes desktop web apps feel more native.
Window Controls Overlay is a new Progressive Web App (PWA) feature that Microsoft initially talked about in January 2020. The company then started working on an early implementation in March 2021 through the Chromium project followed by an Origin trial, with Chrome actually adopting it with version 102 in May 2022. It has now become the default experience on Edge 105 too with a formal specification being published too.
There has been much effort on this front because it makes PWAs feel more native. And it does not accomplish this by making them more performant, rather, it does this by making a seemingly minor UX enhancement. Instead of making the title bar of an app follow the operating system defaults, it returns around 30px of height back to the PWA by giving it almost full control over the title bar.
While 30px sounds small, it would give a PWA the autonomy to display custom titles, menu bars, navigation tabs, and more in this area. To give you a more visual representation, the white area in the diagram below would be controlled by the PWA:
Example of Window Controls Overlay implemented in a PWA
Microsoft has emphasized that this adapts to different operating systems including Windows, Mac, and Linux. A graphic to show how the utilization of this 30px of height may differ across operating systems can be seen below:
Microsoft says that:
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.
If you’re a PWA developer interested in checking out some code snippets to figure out how you can tweak the title bar to your liking, view Microsoft’s examples here.
Interestingly, Microsoft has noted that Window Controls Overlay is now enabled by default in Edge 105, but none of its changelogs for the major or minor releases of this version highlight this. We have to assume that if you’re on the latest Edge build, the API should be enabled by default for you.
19 hours ago with 1 comment
23 hours ago with 2 comments
Sep 27, 2022 with 33 comments
Sep 26, 2022 with 3 comments
Sep 2, 2022
Aug 17, 2022
Aug 16, 2022
Jul 30, 2022
Please enter your reason for reporting this comment.
windows 11 tick
windows 10
iphone 12 13 14
21h2
windows widgets
teams windows 11
windows 11 2022 update
windows 11 insider preview
windows 11
windows server
windows 11 22h2
tech tip tuesday
twirl
microsoft weekly
© Since 2000 Neowin LLC. All trademarks mentioned are the property of their respective owners.

source

    Would you like to receive notifications on latest updates? No Yes