[SOLVED] WebView2 alternative for Wasm in Uno Platform

WebView2 alternative for Wasm in Uno Platform

The following code works perfectly in WinUI (Uno Platform) to display an embedded BTC chart in the WinUI app:

Xaml:

<Page x:Class="UnoApp1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoApp1"
      xmlns:utu="using:Uno.Toolkit.UI">
  <WebView2 x:Name="webView" />
</Page>

Code-Behind:

public MainPage()
{
    this.InitializeComponent();

    InitializeWebView();
}


private async void InitializeWebView()
        {
            await webView.EnsureCoreWebView2Async();
            string htmlContent = @"
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset='UTF-8'>
                <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                <style>
                    body, html {
                        margin: 0;
                        padding: 0;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                    }
                </style>
            </head>
            <body>
                <!-- TradingView Widget BEGIN -->
                <div class='tradingview-widget-container' style='height:100%;width:100%'>
                  <div class='tradingview-widget-container__widget' style='height:calc(100% - 32px);width:100%'></div>
                  <div class='tradingview-widget-copyright'><a href='https://www.tradingview.com/' rel='noopener nofollow' target='_blank'><span class='blue-text'>Track all markets on TradingView</span></a></div>
                  <script type='text/javascript' src='https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js' async>
                  {
                  'autosize': true,
                  'symbol': 'NASDAQ:AAPL',
                  'interval': 'D',
                  'timezone': 'Etc/UTC',
                  'theme': 'dark',
                  'style': '1',
                  'locale': 'en',
                  'allow_symbol_change': true,
                  'calendar': false,
                  'support_host': 'https://www.tradingview.com'
                  }
                  </script>
                </div>
                <!-- TradingView Widget END -->
            </body>
            </html>";
            webView.NavigateToString(htmlContent);
        }

I'm aware that Wasm doesn't support WebView2, but I haven't been able to find a working alternative?

Anyone know of an existing solution or UserControl that has been built that can display this in Wasm?

Solution

Finally figured out how to do it on a Single Platform project using the BROWSERWASM directive:

#if BROWSERWASM
    [Uno.UI.Runtime.WebAssembly.HtmlElement("iframe")]
    public partial class WidgetWebView : Control
#else
    public partial class WidgetWebView : WebView2
#endif
    {
        public WidgetWebView()
        {
            Loaded += (_, __) =>
            {
                SetContent(content);
            };
        }

        public void SetContent(string content)
        {
            .
            .
            .

#if BROWSERWASM
            this.SetHtmlAttribute("srcdoc", content);
#else
            this.NavigateToString(content);
#endif
        }
    }

UPDATED: Inherited from Control on WASM as per @CarldeBilly suggestion