👁 Image
WebView.Avalonia.MacCatalyst 11.0.0.1

Avalonia.WebView

Develop

• please install VisualStudio 2022 or greater or rider
• use .net7 runtime (version 7.0.0 or greater)(if you want to use others, please modify the version in the global.json)
• please setup workloads include Android, iOS, Wasm , MacOS
• please open the long path support in Windows OS(https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation?tabs=registry)

How to use

1. Add [WebView.Avalonia][nuget] or [BlazorWebView.Avalonia][nuget] nuget package to your avaloniaui shared project:

   dotnet add package WebView.Avalonia
    OR
   dotnet add package BlazorWebView.Avalonia
   

2. Add [WebView.Avalonia.Desktop][nuget] nuget package to your avaloniaui desktop project:

   dotnet add package WebView.Avalonia.Desktop
   

3. Add [WebView.Avalonia.Android][nuget] nuget package to your avaloniaui Android project:

   dotnet add package WebView.Avalonia.Android
   

4. Add [WebView.Avalonia.iOS][nuget] nuget package to your avaloniaui iOS project:

   dotnet add package WebView.Avalonia.iOS
   

5. Edit App.axaml.cs file:

    using AvaloniaWebView;
   
    OR
   
    using AvaloniaBlazorWebView;
    ...
    public override void RegisterServices()
    {
    base.RegisterServices();
   
    // if you use only WebView 
    AvaloniaWebViewBuilder.Initialize(default);
   
    // Or
   
    // if you use BlazorWebView, please setting for blazor 
    AvaloniaBlazorWebViewBuilder.Initialize(default, setting =>
    {
    //this is setting for blazor 
    setting.ComponentType = typeof(AppWeb);
    setting.Selector = "#app";
   
    //because avalonia support the html css and js for resource ,so you must set the ResourceAssembly 
    setting.IsAvaloniaResource = true;
    setting.ResourceAssembly = typeof(AppWeb).Assembly;
    }, inject =>
    {
    //you can inject the resource in this
    inject.AddSingleton<WeatherForecastService>();
    });
    }
   

6. Edit Program file for Desktop:

   using Avalonia.WebView.Desktop; <<---add this
   ...
    public static AppBuilder BuildAvaloniaApp()
    => AppBuilder.Configure<App>()
    .UsePlatformDetect()
    .LogToTrace()
    .UseReactiveUI()
    .UseDesktopWebView(); <<---add this
   

7. Edit SplashActivity file for Android:

   using Avalonia.WebView.Android; <<---add this
   ...
   protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
   {
    return base.CustomizeAppBuilder(builder)
    .UseReactiveUI()
    .UseAndroidWebView(); <<---add this
   }
   

8. Edit AppDelegate file for iOS:

   using Avalonia.WebView.iOS; <<---add this
   ...
   protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
   {
    return builder.UseReactiveUI()
    .UseIosWebView(); <<---add this
   }
   

Description

use Webview2 for Windows (please install Microsoft edge Webview2)

use WKWebView[Appkit] for MacOS (system in)

use Webkit Webview for Linux (if not please install [sudo apt-get libwebkit2gtk-4-37])

use Android.Webkit.WebView for Android (this is in Microsoft-Android [net5.0-Android; net6.0-Android; net7.0-Android])

use WKWebView[UIKit] for iOS (this is in Microsoft-iOS [net5.0-ios; net6.0-ios; net7.0-ios])

Demo

You can always download demo executable to play around with WebView

https://github.com/MicroSugarDeveloperOrg/Avalonia.WebView.Sample

Version compatibility

NOTE

WebView.Avalonia is moving forward together with Avalonia preview versions now. So new feature/fixes are not backported to previous preview versions. If you need a feature/fix for outdated avalonia preview version, please raise an issue so we can do that for you.

Credits

Avalonia

Maui

Xamarin.MacIos

Microsoft.WebView2

GTKSharp

WebkitGtkSharp