Log in
The web is ubiquitous and accessible, but native apps are desirable and personal. Developers/teams maintaining web apps likely have a plethora of web content in HTML, CSS and JavaScript. Thanks to modern WebViews, like the WebView2 in Uno Platform, web content is now very welcome on native platform targets. Let’s dive in to explore.
A Modern WebView
Web apps are universal. From informational dashboards to entire line-of-business systems, rich interactive experiences are now routinely delivered as web content, reachable from any device with a browser and continuously updated without redeployment.
At the same time, native mobile/desktop apps remain essential. They offer performance, platform integration, offline capabilities, and access to device features that the browser alone cannot always provide.
Historically, there was a sharp divide: web content lived in the browser, and native apps had to re-implement functionality to bring those experiences to devices. That divide is rapidly disappearing.
Modern WebView technologies have matured to the point where web content can be treated as a first-class citizen inside native apps. Developers can now embed web experiences directly into desktop and mobile apps, while retaining full control over navigation, lifecycle, and host-to-web communication. Rather than replacing native UI, web content can now complement it — used where it makes sense, shared across platforms, and updated independently of the app itself.
Uno Platform embraces this hybrid reality. By providing a unified, cross-platform WebView2 UI component, Uno Platform enables developers to seamlessly welcome web content into native apps across mobile, desktop and the web itself. The result is a pragmatic approach: reuse existing web investments, accelerate development, and blend web and native UI without sacrificing the strengths of either. Let’s take a look at the developer experience ..
Working with Web Content
Modern WebViews are excellent UI components – they have the full rendering power of the underlying browser engine and smart enough to render the right abstraction based on which target platform the Uno Platform is running on. What type of things can WebView2 render? As long the web’s love language is HTML, CSS or JavaScript, everything is fair game.
Remote Content
Let’s start with the simplest scenario – there is some remote web content meant to be rendered in browsers. One can add a WebView2 to UI markup, like so:
And simply point the WebView to the website.
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
MyWebView.Source = new Uri("https://platform.uno/");
}
If housed within an infinite UI container, WebView2 simply takes up the full available space and renders the website perfectly and responsively, if supported – just inside a native desktop/mobile app.
DOM Manipulation
WebView2 is also perfectly happy to render local HTML/CSS – let’s change up the UI markup first:
Once the container XAML page loads up, we can feed the WebView some random HTML to render – a DIV tag in this case.
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
MyWebView.NavigateToString("");
MyWebView.NavigationCompleted += async (s, e) =>
{
await MyWebView.ExecuteScriptAsync("document.getElementById('mydiv').style.backgroundColor = 'red';");
};
}
Once the WebView has rendered the HTML, Document Object Model (DOM) manipulation works as well – thanks to JavaScript execution, the DIV color changes from blue to red:
Execute JavaScript
Need the WebView to execute local JavaScript? It’s essentially a browser – so, things work as expected:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
MyWebView.NavigateToString("");
MyWebView.NavigationCompleted += async (s, e) =>
{
await MyWebView.ExecuteScriptAsync("document.getElementById('mydiv').style.backgroundColor = 'red';");
var jsExecution = await MyWebView.ExecuteScriptAsync("1 + 1");
await MyWebView.ExecuteScriptAsync("document.getElementById('myH1').textContent =" + jsExecution + ";");
};
}
The additional header tag in HTML shows the result of the JavaScript method adding two numbers – unlike non-deterministic AI, JS execution means actual math:
C#-JS Communication
Uno Platform apps are essentially .NET cross-platform apps with C#/XAML code, while the WebView2 component is working with web UI in HTML/CSS/JavaScript. If needed, the web content in the WebView can intereact with the host – yes, C# and JavaScript can communicate easily. Let’s add a native text element to our XAML UI markup:
Now, let’s write up a JavaScript function with some platform-specific checks – the goal is to post a message from the WebView to the C#/XAML host:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
// MyWebView.Source = new Uri("https://platform.uno/");
MyWebView.NavigateToString("
");
MyWebView.NavigationCompleted += async (s, e) =>
{
await MyWebView.ExecuteScriptAsync("document.getElementById('mydiv').style.backgroundColor = 'red';");
var jsExecution = await MyWebView.ExecuteScriptAsync("1 + 1");
await MyWebView.ExecuteScriptAsync("document.getElementById('myH1').textContent =" + jsExecution + ";");
var jsFunction = @"
function postWebViewMessage(message){
try{
if (window.hasOwnProperty('chrome') && typeof chrome.webview !== undefined) {
// Windows
chrome.webview.postMessage(message);
} else if (window.hasOwnProperty('unoWebView')) {
// Android
unoWebView.postMessage(JSON.stringify(message));
} else if (window.hasOwnProperty('webkit') && typeof webkit.messageHandlers !== undefined) {
// iOS and macOS
webkit.messageHandlers.unoWebView.postMessage(JSON.stringify(message));
}
}
catch (ex){
alert('Error occurred: ' + ex);}
}
";
await MyWebView.ExecuteScriptAsync(jsFunction);
await MyWebView.ExecuteScriptAsync("postWebViewMessage('Hello world from JS!');");
};
MyWebView.WebMessageReceived += (s, e) =>
{
MyTextBlock.Text = e.WebMessageAsJson;
};
}
When C# received the message from the WebView, it simply updates the XAML text element with what it received from JavaScript – works the other way as well.
Inspect That
Just to make sure WebView2 renders web content seamlessly across platforms, let’s switch up the target runtime – this time iOS running on an iPad simulator:
Works as expected – this is web content rendered by a WebView, but inside the shell of a native cross-platform .NET app. One thing web developers love is browser developer tools – being able to inspect and manipulate web UI, while the app is running in the browser. Should the same developer experience be possible with native apps hosting a WebView? Sure thing – some platforms might need extra permissions to make web content inspectable, like for iOS at app startup:
public App()
{
this.InitializeComponent();
#if __IOS__
Uno.UI.FeatureConfiguration.WebView2.IsInspectable = true;
#endif
}
Now when the app is running, Safari Developer mode sees the app – essentially, noticing the WebView component running inside a native app:
And just like that, any and all web content rendered inside the WebView is inspectable with browser developer tools – developers can manipulate HTML/CSS/JS to their heart’s content:
Native Apps Welcome Web Content
Got web content in the form of HTML, CSS and JavaScript? They are most welcome on native cross-platform apps on mobile and desktop. The WebView2 UI in Uno Platform warmly accepts web UI – developers get to reuse web investments and maintain consistency of experiences across web/devices. Rich web experiences often need native counterparts – modern WebViews enable a seamless experience.
But what if developers/teams have investments in building browser experiences with modern web frameworks, like Angular/React/others? Fret not – that works as well. Please stay tuned for upcoming articles to showcase the reusability experience.
Cheers developers!
Next Steps
Ready to boost your productivity and simplify cross-platform .NET development? Try Uno Platform today by downloading our extension for your preferred IDE and join our developer community.
The post Welcoming Web Content to Native Apps appeared first on Uno Platform.
