BlazorWebView를 사용하여 .NET MAUI 앱에서 Blazor 웹앱 호스트

.NET 다중 플랫폼 앱 UI(.NET MAUI) BlazorWebView 는 .NET MAUI 앱에서 Blazor 웹앱을 호스트할 수 있는 컨트롤입니다. Blazor 하이브리드 앱이라고 하는 이러한 앱을 사용하면 Blazor 웹앱을 플랫폼 기능 및 UI 컨트롤과 통합할 수 있습니다. 컨트롤을 BlazorWebView .NET MAUI 앱의 모든 페이지에 추가하고 Blazor 앱의 루트를 가리낼 수 있습니다. Razor 구성 요소는 .NET 프로세스에서 기본적으로 실행되고 포함된 웹 보기 컨트롤에 웹 UI를 렌더링합니다. .NET MAUI에서 Blazor 하이브리드 앱은 .NET MAUI에서 지원하는 모든 플랫폼에서 실행할 수 있습니다.

BlazorWebView는 다음 속성을 정의합니다.

  • HostPageBlazor 웹앱의 루트 페이지를 정의하는 형식 string?의 입니다.
  • RootComponents- 컨트롤에 추가할 수 있는 루트 구성 요소의 컬렉션을 지정하는 형식 RootComponentsCollection입니다.

RootComponent 클래스는 다음과 같은 속성을 정의합니다.

  • Selector- 구성 요소를 배치해야 하는 문서의 위치를 지정하는 CSS 선택기 문자열을 정의하는 형식 string?의 입니다.
  • ComponentType- 루트 구성 요소의 Type?형식을 정의하는 형식입니다.
  • Parameters- 루트 구성 요소에 전달할 매개 변수의 선택적 사전을 나타내는 형식 IDictionary<string, object?>?입니다.

또한 BlazorWebView 다음 이벤트를 정의합니다.

  • BlazorWebViewInitializing는 초기화되기 전에 발생하는 함께 제공되는 BlazorWebViewInitializingEventArgs 개체와 BlazorWebView 함께 표시됩니다. 이 이벤트를 사용하면 구성을 사용자 지정할 수 있습니다 BlazorWebView .
  • BlazorWebViewInitialized는 초기화된 후 BlazorWebView 구성 요소가 렌더링되기 전에 발생하는 함께 제공되는 BlazorWebViewInitializedEventArgs 개체와 함께 표시됩니다. 이 이벤트를 사용하면 플랫폼별 웹 보기 인스턴스를 검색할 수 있습니다.
  • UrlLoading는 함께 제공되는 UrlLoadingEventArgs 개체와 함께 하이퍼링크를 클릭 BlazorWebView할 때 발생합니다. 이 이벤트를 사용하면 하이퍼링크가 외부 앱에서 BlazorWebView열리는지 또는 URL 로드 시도가 취소되었는지 여부를 사용자 지정할 수 있습니다.

기존 Razor 구성 요소는 코드를 앱으로 이동하거나 구성 요소가 포함된 기존 클래스 라이브러리 또는 패키지를 참조하여 .NET MAUI Blazor 앱에서 사용할 수 있습니다.

Blazor 하이브리드 앱에 대한 자세한 내용은 ASP.NET Core Blazor Hybrid를 참조하세요.

참고

Visual Studio .NET MAUI Blazor 앱을 개발하는 데 필요한 모든 도구를 설치하지만 Windows .NET MAUI Blazor 앱의 최종 사용자는 WebView2 런타임을 설치해야 합니다.

.NET MAUI Blazor 앱 만들기

.NET MAUI Blazor 앱 템플릿을 통해 Visual Studio .NET MAUI Blazor 앱을 만들 수 있습니다.

.NET MAUI Blazor app project template screenshot.

이 프로젝트 템플릿은 Android, iOS, macOS 및 Windows 배포할 수 있는 다중 대상 .NET MAUI Blazor 앱을 만듭니다. .NET MAUI Blazor 앱을 만드는 방법에 대한 단계별 지침은 .NET MAUI Blazor 앱 빌드를 참조하세요.

프로젝트 템플릿에서 만든 내용은 BlazorWebViewMainPage.xaml에 정의되며 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>

앱의 루트 Razor 구성 요소는Main.razor에 있으며, Razor는 애플리케이션의 루트 네임스페이스에 명명된 Main 형식으로 컴파일됩니다. 나머지 Razor 구성 요소는Pages공유 프로젝트 폴더에 있으며 기본 Blazor 웹 템플릿에 사용되는 구성 요소와 동일합니다. 앱의 정적 웹 자산은 wwwroot 폴더에 있습니다.

기존 앱에 BlazorWebView 추가

기존 .NET MAUI 앱에 추가하는 BlazorWebView 프로세스는 다음과 같습니다.

  1. CSPROJ 프로젝트 파일의 첫 번째 줄을 편집하여 Razor SDK Microsoft.NET.Sdk.Razor 를 프로젝트에 추가합니다.

    <Project Sdk="Microsoft.NET.Sdk.Razor">
    

    Razor SDK는 Blazor 프로젝트에 대한 Razor 파일이 포함된 프로젝트를 빌드하고 패키지하는 데 필요합니다.

  2. 앱의 루트 Razor 구성 요소를 프로젝트에 추가합니다.

  3. PagesShared라는 프로젝트 폴더에 Razor 구성 요소를 추가합니다.

  4. wwwroot라는 프로젝트 폴더에 정적 웹 자산을 추가합니다.

  5. 선택적 _Imports.razor 파일을 프로젝트에 추가합니다.

  6. BlazorWebView.NET MAUI 앱의 페이지에 추가하고 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>
    
  7. 앱에서 CreateMauiApp 사용할 컨트롤을 등록하도록 클래스의 BlazorWebViewMauiProgram 메서드를 수정합니다. 이렇게 하려면 개체에서 메서드를 IServiceCollectionAddMauiBlazorWebView 호출하여 서비스 컬렉션에 구성 요소 웹 보기 서비스를 추가합니다.

    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.AddMauiBlazorWebViewDeveloperTools();
    #endif
            // Register any app services on the IServiceCollection object
            // e.g. builder.Services.AddSingleton<WeatherForecastService>();
    
            return builder.Build();
        }
    }