Comparing WebView and HybridWebView

When embarking on the journey of embedding web content within your .NET MAUI applications, you'll encounter two primary controls: WebView and HybridWebView. While both are designed to display web content, they serve distinct purposes, particularly concerning the level of interaction and communication required between your web content and the native .NET MAUI application. Understanding their differences is crucial for choosing the right control for your specific web wrapping scenario, and this chapter provides the appropriate explanation.

Introducing the HybridWebView

The HybridWebView is a new control introduced with .NET 9, which extends the functionality of a basic WebView by enabling seamless two-way communication between JavaScript running in the embedded web content and C# code in your .NET MAUI application. This capability is often referred to as JavaScript interoperability or JavaScript/C# bridging.

Traditional web views are excellent for displaying webpages, much like a miniature browser, as you will discover in the next chapters. However, they typically lack an easy, direct mechanism for the web content to interact with the native app code, or for the native app to directly invoke JavaScript functions within the web content.

Note: Lacking direct and easy mechanisms for interaction between app code and website code does not mean that the WebView control cannot do this. In fact, starting with Chapter 5, you will see how to implement a complete mobile wrapping solution based on a regular WebView and specific C# and JavaScript code.

The HybridWebView finally bridges this gap by exposing specific APIs that allow:

·     C#-to-JavaScript interaction: C# code can execute JavaScript functions within the loaded web content and pass arguments to them.

·     JavaScript-to-C# interaction: JavaScript code running in the web content can call C# methods exposed by your .NET MAUI application, allowing web actions to trigger native functionality (such as accessing device sensors, saving data to a native database, or showing a native alert).

This makes the HybridWebView ideal for building rich hybrid applications where the web content is not just a static display, but an interactive part of the native application, deeply integrated with device capabilities and native UI elements.

Differences between HybridWebView and WebView

For the sake of clarity, Table 1 summarizes the key differences between the two controls.

Table 1: Differences between the WebView and HybridWebView

Choosing between the WebView and HybridWebView

Choose the WebView when your primary goal is displaying web content like external websites or displaying local HTML files, and if you need more complex native interaction between the external website and your app, as you will discover starting with Chapter 5.

Instead, choose the HybridWebView when your web content can be an integral part of your mobile application, requiring the ability to invoke native functionalities or for the native app to control elements within the web view.

Chapter summary

This chapter provided a detailed comparison of WebView and HybridWebView, highlighting their distinct purposes, use cases, and particularly the crucial two-way communication capabilities of the latter. Understanding these differences is key to making informed decisions when building your mobile web wrapper.

In Chapter 4, you will dive into the practical implementation of web content embedded in a .NET MAUI app using HybridWebView, complete with interactive JavaScript and C# communication.