Exploring the new HybridWebView for MAUI 9

In this blog post, I want to share my experience using the new HybridWebView for MAUI 9. The process was surprisingly easy to add a React web app into my MAUI app, and I would definitely use it again in the future.

Introduction

The HybridWebView in MAUI 9 offers a new way to integrate web content into your mobile applications. Unlike the traditional WebView hybrid approach, which requires the web app to be hosted somewhere else and running, the HybridWebView allows you to embed your web app directly into your MAUI app. This eliminates the need for separate hosting and the associated costs.

Benefits of HybridWebView

Using the HybridWebView has several advantages over the standard WebView approach:

1. No Separate Hosting Required: With HybridWebView, you don't need to spin up your web app separately or make it publicly available before integrating it into your MAUI app.
2. Stable Versioning: You can ensure that the version of your web app embedded in your mobile app is stable and consistent.
3. Cost Savings: By not requiring a separate hosting environment, you can save on hosting costs.

Potential Drawbacks

While the HybridWebView approach has many benefits, there are some potential drawbacks to consider:

1. Divergence Between Web and Mobile Apps: If you can automatically push updates to your web app but have to wait for reviews in the app stores before pushing updates to your mobile app, there may be some divergence between the two versions.
2. Review Delays: Updates to your mobile app will still need to go through the app store review process, which can introduce delays.

How-To Guide

The following how to will go through some of the steps I took to create a simple MAUI 9 app with a react web application

Step 1: Set up your react web application

For this step I used web storm to create a simple vite + react web application which looked like this:

At this point I have made no changes to the sample app. To generate the files you need, the sample app is enough as it generates the package.json file with the commands you need.

Step 2: Generate your web files

Once you have your react app created, you can run

npm build

This will generate your files in the dist directory.

These are the files that your MAUI application will need to run your web app from the HybridWebiew.

Step 3: Set Up Your MAUI Project

At this point you should now have your web application, and the built files in the dist folder. The next step is to create your MAUI 9 app using your preferred choice of approach. For me, I use Jetbrains Rider to create my MAUI applications and this is the basic configuration

Once you have created your app, you should now have the basic “hello world app”.

Step 4: Add in your web app files

Before we can slot in the HyrbidWebView XAML element, it needs to have the supporting web app files. These files should be stored in the ‘Resources/Raw’ directory, and you can create a folder in here with any name. My example I am using is “reactApp” and once you have added in your files you should have something similar to this

So at this point we now have our web application files added into our new MAUI 9 app and we are ready to configure our HybridWebView.

Step 5: Add the HybridWebView

For me at this stage, I just wanted to use an existing file so that the HybridWebView was the first thing that users seen when they open the app. To do this I updated the MainPage.xaml to remove the existing elements and slot in my HybridWebView element

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp2.MainPage">

    <HybridWebView 
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand"
        HybridRoot="reactApp" DefaultFile="index.html" />
</ContentPage>

Doing this will cause some build issues so remember to go in and remove/comment out the counter from the basic app to stop build errors

namespace MauiApp2;

public partial class MainPage : ContentPage
{
    int count = 0;

    public MainPage()
    {
        InitializeComponent();
    }
}

Step 6: Test Your Application

Once you have made all these changes you should now be in a position to test your new MAUI 9 app with your react web application. The app ran on an iOS simulator should look something like the below screenshot

This is your react application built and running successfully hosted in your MAUI 9 application!

Conclusion

Overall, I really like the HybridWebView approach for integrating web content into your MAUI apps. The ease of integration, cost savings, and stable versioning make it a compelling choice. While there are some potential drawbacks, such as divergence between web and mobile app versions, the benefits far outweigh these concerns. I would definitely consider this approach for future projects.