Blazor Hybrid app via BlazorwWebView in Avalonia

[qrzychu]

It would be extremely good to be able to write Avalonia Blazor Hybrid aps, just like it is possible with MAUI, WPF and even Winforms

*What is Hybrid app? *

Ms Docs

In general, it is a native app with a specialized web view to handle Blazor. Blazor components are run directly in process (no WASM, no JS), and the view just renders them. I don't know any technical details how to do it.

That way you get great performance (in process Blazor components), low memory usage (the only web layer is rendering), Blazor productivty and cross-platform support due to Avalonia.

I have no idea if this is hard task, but I think many people would prefer to host the Hybrid Blazor app in Avalonia over .NET MAUI if they go cross-platform.

[maxkatz6]

Yes, it's possible to implement. Furthermore, it should already work with no issues on Windows, where you can combine our NativeControlHost with WPF/WinForms BlazorWebView component. Similarly how I did it for the usual WebView component in Avalonia using native browser view - https://github.com/maxkatz6/AvaloniaWebView.

It's definitely possible to port other platforms in similar way, like they did for MAUI dotnet/maui#654. Especially when Avalonia now supports native controls for mobile platforms in nightly builds, so it's possible to use native webkit for both android and ios.

Saying that, it's should be an interesting project, but it can't fit in the scope of our current release. And I am not sure if it's something that should be available as first class control in the Avalonia repository. Saying that, if community wants to implement that and maintain as an third party library, we can help with information how it should be implemented.

[somelinguist]

@jpmikkers for Mac, I just copied it from the Maui iOS implementation here:

https://github.com/dotnet/maui/blob/3859318f971b39b9d4a0e48492a3daed012cb695/src/BlazorWebView/src/Maui/iOS/BlazorWebViewHandler.iOS.cs#L27-L50

I don't thing I remember changing anything for that part. :)

Many of the changes from the Maui iOS version were just changing UI prefixes to NS, and then making sure it interacted with Eto.Forms handlers.

[jpmikkers]

Well, I have CefSharp based BlazorWebView up and running (code: see here).
Next step is to use CefGlue instead, it should be able to run in Linux.

[idan-h]

Any update or help needed with that? @jpmikkers

[jpmikkers]

Waiting for a decent x-platform open source c# WebView. Last time I tried CefGlue I couldn't get it to run in-process.

[jairbubbles]

@jpmikkers What about https://github.com/webview/webview_csharp?

[robloo]

Note that a lot of this work is just implementing a WebView for Avalonia that works cross platform. This is definitely something Avalonia needs as a 1st party control in some form to stay competitive. I'm surprised there hasn't been more concern that it is missing.

This means I don't necessarily agree that BlazorWebView shouldn't be a "first class control in Avalonia". WebView must be a first class control sooner rather than later. Then once that is done, making a BlazorWebView is quite easy I imagine.

When I have time I will be happy to assist in starting a WebView control (@maxkatz6 already did quite some work). It is something that will be needed on my end as well. For mobile platforms it must wrap the native WebViews so we might as well do the same for Desktop. This means it will be much easier to maintain as we don't have to worry about all the details or keeping it up to the latest standards. This will likely be the only control that follows a MAUI-type architecture though.

[Laftek]

Completely agree. Blazor becoming respected in webdev world can only help Avalonia to get bigger audience and possible replacement for MAUI.

[anna-dolbina]

If you're interested in proprietary solutions, you can try DotNetBrowser, which actually provides a complete web view for Windows, Linux, and macOS:
https://avaloniaui.net/Blog/dotnetbrowser-meets-avalonia

It will work with Blazor too, btw, after certain integration efforts.

[vlad-lubenskyi]

We created a template for Blazor Hybrid & Avalonia UI apps, using DotNetBrowser as a web view:

dotnet new install DotNetBrowser.Templates
dotnet new dotnetbrowser.blazor.avalonia.app -o Blazor.AvaloniaUi -li <your_license_key>
dotnet run --project Blazor.AvaloniaUi

DotNetBrowser is not free, of course. But here is an article that explains how we integrated it all together, and replicating the approach with with anything CEF-based should be a no-brainer.