Hospedaje de una aplicación web de Blazor en una aplicación de .NET MAUI mediante BlazorWebView

Artículo
02/13/2024

BlazorWebView de la interfaz de usuario de aplicaciones multiplataforma de .NET (.NET MAUI) es un control que permite hospedar una aplicación web de Blazor en la aplicación de .NET MAUI. Estas aplicaciones, conocidas como aplicaciones híbridas de Blazor, permiten que una aplicación web de Blazor se integre con características de la plataforma y controles de la interfaz de usuario. El control BlazorWebView se puede agregar a cualquier página de una aplicación de .NET MAUI y apuntar a la raíz de la aplicación de Blazor. Los componentes de Razor se ejecutan de forma nativa en el proceso de .NET y representan la interfaz de usuario web en un control WebView incrustado. En .NET MAUI, las aplicaciones híbridas de Blazor se pueden ejecutar en todas las plataformas compatibles con .NET MAUI.

BlazorWebView define las siguientes propiedades:

HostPage, de tipo string?, que define la página raíz de la aplicación web de Blazor.
RootComponents, de tipo RootComponentsCollection, que especifica la colección de componentes raíz que se pueden agregar al control.

HostPage, de tipo string?, que define la página raíz de la aplicación web de Blazor.
RootComponents, de tipo RootComponentsCollection, que especifica la colección de componentes raíz que se pueden agregar al control.
StartPath, de tipo string, que define la ruta de acceso para la navegación inicial dentro del contexto de navegación blazor cuando el componente Blazor termina de cargarse.

La clase RootComponent define las propiedades siguientes:

Selector, de tipo string?, que define la cadena del selector CSS que especifica en qué parte del documento se debe colocar el componente.
ComponentType, de tipo Type?, que define el tipo del componente raíz.
Parameters, de tipo IDictionary<string, object?>?, que representa un diccionario opcional de parámetros que se va a pasar al componente raíz.

Además, BlazorWebView define los siguientes eventos:

BlazorWebViewInitializing, con un objeto complementario BlazorWebViewInitializingEventArgs, que se genera antes de que se inicialice BlazorWebView. Este evento habilita la personalización de la configuración de BlazorWebView.
BlazorWebViewInitialized, con un objeto complementario BlazorWebViewInitializedEventArgs , que se genera después de que se inicialice BlazorWebView, pero antes de que se haya representado cualquier componente. Este evento habilita la recuperación de la instancia de vista web específica de la plataforma.
UrlLoading, con un objeto complementario UrlLoadingEventArgs, se genera cuando se hace clic en un hipervínculo dentro de un BlazorWebView. Este evento habilita la personalización de si se abre un hipervínculo en BlazorWebView, en una aplicación externa o si se cancela el intento de carga de direcciones URL.

Los componentes de Razor existentes se pueden usar en una aplicación de Blazor de .NET MAUI al mover el código a la aplicación o al hacer referencia a una biblioteca de clases o a un paquete existente que contiene el componente. Para más información, consulte Reutilización de componentes de Razor en ASP.NET Core Blazor Hybrid.

Las herramientas de desarrollo del explorador se pueden usar para inspeccionar aplicaciones de Blazor de .NET MAUI. Para obtener más información, consulte Uso de las herramientas de desarrollo del explorador con ASP.NET Core Blazor Hybrid.

Nota:

Aunque Visual Studio instala todas las herramientas necesarias para desarrollar aplicaciones de Blazor de .NET MAUI, los usuarios finales de aplicaciones de Blazor de .NET MAUI en Windows deben instalar el tiempo de ejecución WebView2 .

Para obtener más información sobre las aplicaciones de Blazor Hybrid, consulte ASP.NET Core Blazor Hybrid.

Creación de una aplicación .NET MAUI Blazor

Se puede crear una aplicación .NET MAUI Blazor en Visual Studio mediante la plantilla de la aplicación de .NET MAUI Blazor:

.NET MAUI Blazor app project template screenshot.

Esta plantilla de proyecto crea una aplicación de .NET Blazor con varios objetivos que se puede implementar en Android, iOS, macOS y Windows. Para obtener instrucciones paso a paso sobre cómo crear una aplicación de .NET MAUI Blazor, consulte Compilación de una aplicación de .NET MAUI Blazor.

La plantilla de proyecto BlazorWebView creada se define en MainPage.xaml y apunta a la raíz de la aplicación de Blazor:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlazorWebViewDemo"
             x:Class="BlazorWebViewDemo.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

El componente raíz de Razor de la aplicación está en Main.razor, que compila Razor en un tipo denominado Main en el espacio de nombres raíz de la aplicación. El resto de los componentes de Razor se encuentran en las carpetas de proyecto Páginas y Compartido, y son idénticas a los componentes que se usan en la plantilla web predeterminada de Blazor. Los recursos web estáticos de la aplicación se encuentran en la carpeta wwwroot.

Adición de blazorWebView a una aplicación existente

El proceso para agregar un BlazorWebView a una aplicación de .NET MAUI existente es el siguiente:

Agregue el SDK de Razor Microsoft.NET.Sdk.Razor al proyecto, para hacerlo, edite su primera línea del archivo de proyecto CSPROJ:
```
<Project Sdk="Microsoft.NET.Sdk.Razor">
```
El SDK de Razor es necesario para compilar y empaquetar proyectos que contengan archivos de Razor para proyectos de Blazor.
Agregue el componente raíz de Razor de la aplicación al proyecto.
Agregue los componentes de Razor a las carpetas de proyecto denominadas Páginas y Compartido.
Agregue los recursos web estáticos a una carpeta de proyecto denominada wwwroot.
Agregue los archivos opcionales _Imports.razor al proyecto.

Agregue un BlazorWebView a una página en la aplicación de .NET MAUI y apunte a la raíz de la aplicación de Blazor:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyBlazorApp"
             x:Class="MyBlazorApp.MainPage">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

Modifique el método CreateMauiApp de la clase MauiProgram para registrar el control BlazorWebView para usarlo en la aplicación. Para ello, en el objeto IServiceCollection, llame al método AddMauiBlazorWebView para agregar servicios de vista web de componentes a la colección de servicios:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif
        // Register any app services on the IServiceCollection object
        // e.g. builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

Acceso a servicios con ámbito desde la interfaz de usuario nativa

BlazorWebView tiene un TryDispatchAsync método que puede llamar a un especificado Action<ServiceProvider> de forma asincrónica y pasar los servicios con ámbito disponibles en los componentes de Razor. Esto permite que el código de la interfaz de usuario nativa acceda a servicios con ámbito como NavigationManager:

private async void OnMyMauiButtonClicked(object sender, EventArgs e)
{
    var wasDispatchCalled = await blazorWebView.TryDispatchAsync(sp =>
    {
        var navMan = sp.GetRequiredService<NavigationManager>();
        navMan.CallSomeNavigationApi(...);
    });

    if (!wasDispatchCalled)
    {
        // Consider what to do if it the dispatch fails - that's up to your app to decide.
    }
}

Diagnóstico de problemas

BlazorWebView tiene un registro integrado que puede ayudarle a diagnosticar problemas en la aplicación híbrida de Blazor. Hay dos pasos para habilitar este registro:

Habilite BlazorWebView y los componentes relacionados para registrar la información de diagnóstico.
Configure un registrador para escribir la salida del registro en donde puede verlo.

Para obtener más información sobre el registro, consulte Registro en C# y .NET.

Habilitación del registro de BlazorWebView

Toda la configuración de registro se puede realizar como parte del registro del servicio en el sistema de inserción de dependencias. Para habilitar el registro máximo para BlazorWebView y los componentes relacionados en el Microsoft.AspNetCore.Components.WebView espacio de nombres, agregue el código siguiente a donde se registran los servicios de la aplicación:

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
});

Como alternativa, para habilitar el registro máximo para cada componente que usa Microsoft.Extensions.Logging, puede usar el código siguiente:

services.AddLogging(logging =>
{
    logging.SetMinimumLevel(LogLevel.Trace);
});

Configuración de la salida de registro y visualización de la salida

Después de configurar los componentes para escribir información de registro, debe configurar dónde deben escribir los registradores los registros y, a continuación, ver la salida del registro.

Los proveedores de registro de depuración escriben la salida mediante Debug instrucciones y la salida se puede ver desde Visual Studio.

Para configurar el proveedor de registro de depuración , agregue primero una referencia en el proyecto al Microsoft.Extensions.Logging.Debug paquete NuGet. A continuación, registre el proveedor dentro de la llamada a AddLogging la que agregó en el paso anterior llamando al método de AddDebug extensión:

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
    logging.AddDebug();
});

Al ejecutar la aplicación desde Visual Studio (con la depuración habilitada), puede ver la salida de depuración en la ventana Salida de Visual Studio.