Avalonia application with Webview can be deploy to Browser version?

[ecojust]

MainView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Demo.Views.MainView">
	<StackPanel>
		<Button Content="123123"></Button>
		<TextBlock Name="GreetTextBlock" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	</StackPanel>
</UserControl>

We know the above code can build successful like this:

But ,how about this? just added an extra webview. I tried, but failed.

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Demo.Views.MainView">
	<StackPanel>
		<Button Content="123123"></Button>
		<TextBlock Name="GreetTextBlock" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <WebView Grid.Column="1" VerticalAlignment="Stretch"  Background="Gray"    x:Name="PART_WebView"  Url="https://127.0.0.1:80/testwebview/index.html#/"/>
	</StackPanel>
</UserControl>

I want to know if it's not possible or if there's something wrong with my methods.
Thanks!!!!!!

Here is the Program.cs:

using Demo;
using Avalonia;
using Avalonia.Browser;
using Avalonia.ReactiveUI;
using System.Runtime.Versioning;
using System.Threading.Tasks;

[assembly: SupportedOSPlatform("browser")]

internal sealed partial class Program
{
    private static Task Main(string[] args) => BuildAvaloniaApp()
            .WithInterFont()
            .UseReactiveUI()
            .StartBrowserAppAsync("out");

    public static AppBuilder BuildAvaloniaApp()
        => AppBuilder.Configure<App>();
}

[maxkatz6]

It's not technically possible to include any kind of WebView in the Browser.
The only option would be to use either HtmlRenderer control or writing a NativeControlHost with IFrame inside. But IFrame approach is very limiting.

[thevortexcloud]

It does not really make sense to embed a web browser in a web browser. iframe is the most simple approach you can do here, but you will run into the same limitations no matter what you do due to how restricted web assembly is. CORS is a pain to deal with but also necessary.

The only real generic work around would be to proxy everything from server hosted on the same domain as your site, and then that can serve your app. But depending on what you are doing, may be a very terrible idea.

[dbriard]

I comment to follow, I know nothing about Web programming expect WASM in Avalonia, but I would be very interrested too by a way to show an iframe in a WASM application. Use case would be to show a marketing external page in an application.

[thevortexcloud]

There is a sample here for creating an iframe, no idea how well it works as I have not tried it.

https://github.com/AvaloniaUI/Avalonia/blob/master/samples/ControlCatalog.Browser/EmbedSample.Browser.cs

You will also need this code:

Avalonia/samples/ControlCatalog/Pages/NativeEmbedPage.xaml.cs

Lines 56 to 86 in 06b3434

	public class EmbedSample : NativeControlHost
	{
	public static INativeDemoControl? Implementation { get; set; }
	static EmbedSample()
	{
	}
	public bool IsSecond { get; set; }
	protected override IPlatformHandle CreateNativeControlCore(IPlatformHandle parent)
	{
	return Implementation?.CreateControl(IsSecond, parent, () => base.CreateNativeControlCore(parent))
	?? base.CreateNativeControlCore(parent);
	}
	protected override void DestroyNativeControlCore(IPlatformHandle control)
	{
	base.DestroyNativeControlCore(control);
	}
	}
	public interface INativeDemoControl
	{
	/// <param name="isSecond">Used to specify which control should be displayed as a demo</param>
	/// <param name="parent"></param>
	/// <param name="createDefault"></param>
	IPlatformHandle CreateControl(bool isSecond, IPlatformHandle parent, Func<IPlatformHandle> createDefault);
	}
	}

But as I mentioned, you will be limited by the limits placed on you by the browser and server. Which in many cases can be fairly significant.

[ecojust]

Yeah,actually we can see that when we deploy application to Browser,
Avalonia.Controls.Button can be transform as a part of canvas,and show the same style.

So,i wonder if it is possible to add a corresponding parsing method for webview elements that automatically resolves them to iframe when depoly it to Browser,and use postmessage instead of webview.executeScriptSync

[thevortexcloud]

I am not sure I fully understand, but you could probably make an abstraction layer that will either make a web view or a native control host depending on what platform it's running on.

[ecojust]

ok,thank you.
I'll try NativeControlHost first to see how it works.
I'll be back to share the progress as soon as I have the results.

[ecojust]

It does work, and the communication is also good.
Here is my sample code:

EmbedSample.Browser.cs:

{
    public class EmbedSampleWeb : INativeDemoControl
    {
        private IPlatformHandle _frameHandle;

        public IPlatformHandle CreateControl()
        {
            var iframe = EmbedInterop.CreateElement("iframe");
            iframe.SetProperty("src", "/frame.html");
            _frameHandle = new JSObjectControlHandle(iframe);
            return _frameHandle;
        }


        public void Execute()
        {
            var parentContainer = (JSObjectControlHandle)_frameHandle;
            SendMessage(parentContainer.Object, "hello world");
            static async void SendMessage(JSObject parent, string message)
            {
                await JSHost.ImportAsync("embed.js", "/embed.js");
                EmbedInterop.SendMessage(parent, message);
            }
        }
    }

    internal static partial class EmbedInterop
    {
        [JSImport("globalThis.document.createElement")]
        public static partial JSObject CreateElement(string tagName);


        [JSImport("SendMessage", "embed.js")]
        public static partial void SendMessage(JSObject parentObject, string message);
    }
}

wwwroot/embed.js:

export function SendMessage(iframe, message) {
    iframe.contentWindow.postMessage(message)
}