With the release of .NET MAUI 9, the HybridWebView control has opened up interesting possibilities for developers who want to integrate native functionality into hybrid applications. HybridWebView goes beyond the capabilities of a conventional WebView by providing a bridge between JavaScript and native APIs. This enables direct communication between web content and native functionality.
This article explains how HybridWebView works, how it is set up, and how native APIs can be made available to web content.
What is the HybridWebView?
The HybridWebView is a control in .NET MAUI 9 specifically designed to combine web technologies with native functionality. It offers:
- Calling native methods from JavaScript: Web content can access native functions, for example for device capabilities such as geolocation, camera or file access.
- Executing JavaScript from .NET code: Native applications can interact with JavaScript logic in web content.
This functionality is particularly suited to scenarios where a hybrid app should benefit from the advantages of a web interface combined with the power of native functionality.
Making Native APIs Available to Web Content
A core feature of HybridWebView is the ability to expose native APIs to web content. This is done via a JavaScript bridge mechanism that enables communication in both directions.
To do this, a JavaScript method (see documentation) is implemented that delegates calls to native APIs:
async function CallNativeApi() {
const result = await window.HybridWebView.InvokeDotNet("CallCsharpApi");
// use result ...
}
Calling Native Functions from JavaScript
Web content can call defined native functions through a standardised interface. This is useful for accessing specific device capabilities or API endpoints that are only available on the native platform.
Registration can be done, for example, in the code-behind of a MAUI Page:
public MainPage()
{
InitializeComponent();
HybridWebView.SetInvokeJavaScriptTarget(this);
}
// Method name used in JavaScript call
public MyResult CallCsharpApi(){
// Access native .NET and .NET MAUI APIs
}
In the links below, alongside the HybridWebView documentation, you will find an example that exposes several native APIs to the WebView.
Calling JavaScript from .NET
In addition to calling native functions from JavaScript, HybridWebView also supports the reverse direction. .NET code can execute JavaScript functions in the loaded web content. This is particularly useful for driving dynamic interactions or updates within the web content.
Our example and this blog post do not cover this case. Please refer to the excellent HybridWebView documentation for more details.
Use Cases
HybridWebView can be usefully employed in various scenarios:
- Embedding complex web applications: Existing web solutions can be integrated into native applications without sacrificing device functionality.
- Single Page Apps with native extensions: SPAs can be extended with capabilities such as file access, geolocation or device integration.
- Hybrid use cases: Web-based UIs can be developed while data is processed locally or natively.
Conclusion
HybridWebView in .NET MAUI 9 provides an elegant solution for hybrid applications that combine web technologies with native functionality. It is flexible, powerful and opens up new possibilities for developing apps that get the best of both worlds.
For developers looking for hybrid solutions, HybridWebView is a valuable tool that integrates easily.
Need support?
Want to develop hybrid apps with .NET MAUI and combine native APIs with web technologies but unsure about implementation? We are happy to help! Simply get in touch via our contact page and we will work together to make your mobile app development a success.