How Microsoft is making Edge the best browser for PWAs
In recent years Progressive Web Apps have become a growing trend, pushed by web giants and mobile developers alike, as they allow to bring native-like experiences to any platform.
Among the companies that committed the most to this new technology is Microsoft, that helped web developers embrace it with projects such as PWABuilder. With the launch of the first Chromium-based version of Microsoft Edge and recent announcements at Build 2020 the company renewed its commitment by introducing exciting new features and APIs that aim at bridging the gap between native and web apps.
So, what are these changes and what do they mean for you?
PWAs as first-class citizens on Windows
The first set of changes concerns the way PWAs installed from Microsoft Edge interact with Windows.
Up until now installing a web app from Edge meant having an incredibly native-feeling application that however behaved strangely in some contexts.
For example, they didn’t show as separate applications in the Settings app or in task manager, thus making them harder to manage, especially for less tech-savvy users. All of this will soon be fixed as the Edge team took the virtual stage at Build 2020 to announce that in a coming version of the browser PWAs will be treated as any other app by Windows.
In addition to this install web apps will also be able to be set as share target (i.e. they will appear in the app list of the Windows share dialog), to request permission to launch when the OS starts up and to be set as default for certain file types, URLs, and protocols.
New APIs
In addition to changes meant to make PWAs feel more native the Edge team unveiled a set of new APIs that will allow web apps to behave more like their native counterparts.
Customizable titlebars
One of the most clear shortcomings of PWAs from a UI standpoint has been their inability to customize their titlebar when running on desktop devices.
New APIs in an upcoming version of Edge should fix this problem by allowing developers to extend HTML elements under the titlebar. This will be particularly useful for complex PWAs that will benefit from this change by being able to place tabs and search bars in their UI without wasting precious space.
Native file system access
Up until now websites were not allowed to save files in a specific location on the user device. This meant that online photo editors required users to upload the photo they wanted to edit and then download it to their device, while a native one would have just given the option to replace the existing one.
Starting from Edge 86 (version 83 is the latest one at the time of writing) developers will be able to replace all files the user selects in a session, thus enabling productivity apps on the web to even more useful.
Badging
We already knew an API to add badges to app icons was coming to Chromium-based browser but now we are seeing for the first time the full picture: not only will we be able to add badges with numbers and icons to PWAs, we will also get access to a new event to be used in service workers to update the content of the badge. I find the concept of such event extremely interesting as it introduces a sort of lightweight alternative to events meant for push notifications.
Although seemingly a small UI tweak, I would not dismiss this as a small change, as user research has proven multiple times that adding badges to an app icon increases user engagement substantially.
An easy path to the Microsoft Store
Thanks to PWABuilder it is already possible to publish a PWA to the Microsoft Store with minimal effort. The most relevant drawback of this approach is that the packaged web apps run on the legacy Edge engine instead of Chromium, thus not being able to leverage some newly-released APIs.
At Build 2020 we discovered that this will all change in a few months, when PWABuilder will allow packaged web apps to run on Chromium.
Wrapping up
As a web developer I am really excited to see Microsoft invest so heavily in Progressive Web Apps, since I consider them to be the future not only of web experiences but also of mobile apps and features such as these make them an even more viable replacement for native languages and frameworks.
If you are as excited as I am about these improvements, I suggest checking out the list of proposed capabilities for PWAs that are being developed as part of Project Fugu, a cross company effort from Google, Microsoft and Intel that brought us many of the previously mentioned changes.
