search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.71k stars 281 forks source link

Can PWAs use the new Mica Material in Windows 11? #1949

Closed antonioberetini closed 2 years ago

antonioberetini commented 3 years ago

Question in detail Is PWA builder for Windows Store using the new WebView 2? If so, is Mica Material supported, https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.backdropmaterial?view=winui-2.6

https://docs.microsoft.com/en-us/windows/apps/design/style/mica

Is your question related to a problem? Please describe. Looking to make PWA's feel and look as native as possible on Windows 11

Describe alternatives you've considered Building a project with the WebView 2 instead

ghost commented 3 years ago

Hello antonioberetini, thank you for your interest in PWABuilder!

I have automatically added a "needs triage" label to help get things started. Our team will look into the question and answer ASAP. Other community members may also answer the question and provide feedback 🙌

JudahGabriel commented 3 years ago

@antonioberetini

Yes and no.

Yes, the Chromium-based engine that drives the new Edge is also driving PWAs on Windows.

But no, your app is not merely a web view inside of UWP frame. Rather, we do something better than that: we utilize the new Hosted App Model that declares that your PWA is hosted by Edge.

In short, Edge and its Chromium-based rendering engine are powering PWAs on Windows.

Getting at your real question, could a PWA take advantage of Mica Material?

I'm less certain about that, because I'm new to Mica. My understanding is that Mica samples some colors from the desktop background and uses that as a base color for your app title bar.

If I'm understanding that right, then the answer is likely no, I don't think that's possible in a PWA. App title bar color is controlled by your PWA's manifest theme_color. There's no way to say, "Use the desktop background as the theme_color".

That said, if there is a way of enabling Mica Material solely from an .msix or .appx package (e.g. in the AppxManifest.xml), then yeah, we could enable that in PWABuilder as an option when you package your PWA for the Microsoft Store.

In short, more info is needed about how Mica Material works.

antonioberetini commented 3 years ago

It’s actually more then that. It uses wallpaper image which is blurred out and saturated with accent colors from the wallpaper. In essence they typical default browser pwa window color would have to be transparent - if that is possible, the rest can be done at the application level.

JudahGabriel commented 3 years ago

Maybe this is a question I can raise with the Edge team. I have a meeting with them tomorrow, I'll see if anyone has thoughts on this.

antonioberetini commented 3 years ago

That would be awesome - also to be honest I don’t see why the PWA builder would not transition to the bee WebView 2. I know edge is piloting some window controls overlays but it’s very limiting and basic. I would rather do this native.

I would also guess Edge View 2 has more native apis exposed.

JudahGabriel commented 3 years ago

I don’t see why the PWA builder would not transition to the bee WebView 2.

There are a host of hidden problems with using web views inside of native hosts. This is why both Microsoft and Google have transitioned away from web views for Store PWAs.

For example, how do you handle 3rd party authentication (e.g. Login with Facebook/Google/Microsoft/Apple/Twitter)? That usually spawns an external window...but ooops, you're a web view, not a full browser. So now you have to handle that case. Then, actually logging in with that needs to communicate back with the host app. So you're left having to write that code yourself.

As I see it today, web view is a good polyfill for Stores that don't support PWAs, like Apple iOS Store. But for Stores that support PWAs as first-class citizens, it's best to power PWAs using the browser itself.

I would rather do this native. I would also guess Edge View 2 has more native apis exposed.

This was Microsoft's old approach: WebView (EdgeHTML / mshtml) inside a UWP host app, and inject the entire WinJS runtime into window.Windows namespace to enable access to native APIs.

Microsoft's and Google's new approach is instead to keep PWAs in the web sandbox, but make PWAs more capable in a safe way. See the Project Fugu for more info: we're making the web more capable, safely, through web standards rather than native APIs.

If you need native APIs, by all means, you can still build a simple UWP app that hosts your web view, and have that web view load your web app. If you need native APIs, that's the best way to go.

antonioberetini commented 3 years ago

Don’t get me wrong I am in full support to making this a standard – I just hope that my PWA wont look like a third world citizen once Windows 11 is out due to lack of support for features that make the OS feel and work so well.

From: Judah Gabriel @.> Sent: Monday, July 19, 2021 9:27 PM To: @.> Cc: Tony @.>; @.> Subject: Re: [pwa-builder/PWABuilder] [Question] (#1949)

I don’t see why the PWA builder would not transition to the bee WebView 2.

There are a host of hidden problems with using web views inside of native hosts. This is why both Microsoft and Google have transitioned away from web views for Store PWAs.

For example, how do you handle 3rd party authentication (e.g. Login with Facebook/Google/Microsoft/Apple/Twitter)? That usually spawns an external window...but ooops, you're a web view, not a full browser. So now you have to handle that case. Then, actually logging in with that needs to communicate back with the host app. So you're left having to write that code yourself.

As I see it today, web view is a good polyfill for Stores that don't support PWAs, like Apple iOS Store. But for Stores that support PWAs as first-class citizens, it's best to power PWAs using the browser itself.

I would rather do this native. I would also guess Edge View 2 has more native apis exposed.

This was Microsoft's old approach: WebView (EdgeHTML / mshtml) inside a UWP host app, and inject the entire WinJS runtime into window.Windows namespace to enable access to native APIs.

Microsoft's and Google's new approach is instead to keep PWAs in the web sandbox, but make PWAs more capable in a safe way. See the Project Fuguhttps://fugu-tracker.web.app/ for more info: we're making the web more capable, safely, through web standards rather than native APIs.

If you need native APIs, by all means, you can still build a simple UWP app that hosts your web view, and have that web view load your web app. If you need native APIs, that's the best way to go.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/pwa-builder/PWABuilder/issues/1949#issuecomment-883002941, or unsubscribehttps://github.com/notifications/unsubscribe-auth/APUUMICYLK2KPBXXGKMAEF3TYTNIHANCNFSM5AUZJCDA.

JudahGabriel commented 3 years ago

Don’t get me wrong I am in full support to making this a standard – I just hope that my PWA wont look like a third world citizen once Windows 11 is out due to lack of support for features that make the OS feel and work so well.

Understood. We certainly want PWAs to be first-class citizens on Windows. We're working towards that.

jgw96 commented 2 years ago

Hey all! So as Judah pointed out above, this is not something that we are working on, its also outside the scope of PWABuilder itself. However, you can use these components https://docs.microsoft.com/en-us/fluent-ui/web-components/ along with CSS features such as backdrop-filter https://developer.mozilla.org/en-US/docs/web/css/backdrop-filter to get a similar effect. It's also important to remember that some of the biggest apps in the store, such as Spotify, do not use the native design language of Windows and that your PWA can be used on other platforms besides Windows. Thanks!