diff --git a/docs/TOC.yml b/docs/TOC.yml index c017257a7..b658dd390 100644 --- a/docs/TOC.yml +++ b/docs/TOC.yml @@ -509,6 +509,48 @@ href: user-interface/live-visual-tree.md - name: Visual states href: user-interface/visual-states.md + - name: Hybrid apps + items: + - name: Overview + href: hybrid-apps/index.md?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Blazor hybrid apps + items: + - name: Overview + href: /aspnet/core/blazor/hybrid/?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Tutorials + items: + - name: Build a .NET MAUI Blazor hybrid app + href: /aspnet/core/blazor/hybrid/tutorials/maui?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Build a .NET MAUI Blazor hybrid app with a Blazor web app + href: /aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Routing and navigatoin + href: /aspnet/core/blazor/hybrid/routing?pivots=maui&toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Static files + href: /aspnet/core/blazor/hybrid/static-files?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Browser developer tools + href: /aspnet/core/blazor/hybrid/developer-tools?pivots=android&toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Reuse Razor components + href: /aspnet/core/blazor/hybrid/reuse-razor-components?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Class libraries + href: /aspnet/core/blazor/hybrid/class-libraries?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Root component parameters + href: /aspnet/core/blazor/hybrid/root-component-parameters?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Security and identity + items: + - name: Overview + href: /aspnet/core/blazor/hybrid/security/?pivots=maui&toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Security considerations + href: /aspnet/core/blazor/hybrid/security/security-considerations?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Publish + href: /aspnet/core/blazor/hybrid/publish/?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Troubleshoot + href: /aspnet/core/blazor/hybrid/troubleshoot?toc=/dotnet/maui/toc.json&bc=/dotnet/maui/breadcrumb/toc.json + - name: Controls + items: + - name: BlazorWebView + href: ~/user-interface/controls/blazorwebview.md + - name: HybridWebView + href: ~/user-interface/controls/hybridwebview.md - name: Platforms items: - name: Android diff --git a/docs/breadcrumb/toc.yml b/docs/breadcrumb/toc.yml index a26bb8fb1..8760facda 100644 --- a/docs/breadcrumb/toc.yml +++ b/docs/breadcrumb/toc.yml @@ -54,3 +54,12 @@ - name: .NET MAUI tocHref: /dotnet/ios/app-fundamentals/images-icons topicHref: /dotnet/maui/index + - name: .NET MAUI + tocHref: /aspnet/core/blazor/hybrid + topicHref: /dotnet/maui/index + - name: .NET MAUI + tocHref: /aspnet/core/blazor/hybrid/tutorials + topicHref: /dotnet/maui/index + - name: .NET MAUI + tocHref: /aspnet/core/blazor/hybrid/security + topicHref: /dotnet/maui/index diff --git a/docs/hybrid-apps/index.md b/docs/hybrid-apps/index.md new file mode 100644 index 000000000..ccd30cb57 --- /dev/null +++ b/docs/hybrid-apps/index.md @@ -0,0 +1,20 @@ +--- +title: "What are hybrid apps?" +description: ".NET Multi-platform App UI (.NET MAUI) hybrid apps enable you to build apps using Blazor components, or HTML and JavaScript, while accessing native platform features and device hardware." +ms.date: 02/12/2025 +--- + +# What are hybrid apps? + +Hybrid apps provide native experiences across multiple device platforms but use web technologies for building the UI. The UI is packaged with the app, and you have full access to the native device capabilities. This approach also allows you to reuse UI assets across devices and web browsers. + +Hybrid apps are a blend of both native and web solutions. The core UI of the app is written using web technologies such as HTML, CSS, and JavaScript. These apps are then wrapped in a lightweight native app container that allows them to use certain native platform features and device hardware (like a device's camera, calendar, push notifications, and pinch and spread functionality) that a web app can't access easily or even use at all. + +This approach allows hybrid apps to run on, for example, both Android and iOS platforms without the need for completely separate development. In addition, they can be downloaded and installed through the app stores. The main advantage of hybrid apps is that they can achieve greater developer productivity via code reuse across devices and web browsers. + +## .NET MAUI hybrid apps + +With .NET Multi-platform App UI (.NET MAUI) you can either host Blazor components with the [BlazorWebView](~/user-interface/controls/blazorwebview.md) control or any other HTML/JavaScript-based UI with the [HybridWebView](~/user-interface/controls/hybridwebview.md) control. These controls derive from the native platform’s `WebView` control. No internet is required - your UI is packaged with the app. This makes it easier to share UI across native and web hosting models. Hybrid apps rely on .NET MAUI for a native app container and native controls, if you want to use them. This means you can mix web UI with native UI if you want to. .NET MAUI hybrid apps can also be packaged for store distribution whether that’s the Microsoft, Apple or Google App stores. + +> [!NOTE] +> .NET MAUI Blazor hybrid apps also have additional controls, templates and tooling in Visual Studio and Visual Studio Code to make development easier.