Приложения Blazor Hybrid

В мае 2022 кода Microsoft представила новую платформу разработки приложений под названием NET Multi-Platform App UI, или сокращенно — .NET MAUI. Используя MAUI мы можем разрабатывать настольные и мобильные приложения, используя при этом единую кодовую базу. На данный момент мы можем разрабатывать приложения под следующие операционные системы: Android, iOS, macOS и Windows. При этом, разработчики платформы позаботились и о том, чтобы позволить нам разрабатывать кроссплатформенные приложения не только с использованием XAML, но и используя Blazor, и назвали такие приложения Blazor Hybrid.

Основные сведения о Blazor Hybrid

Главное отличие Blazor Hybrid от того же Blazor WebAssembly заключается в том, что в приложении Blazor Hybrid компоненты Razor выполняются нативно на устройстве. Компоненты выполняют отрисовку во встроенном элементе управления WebView через локальный канал взаимодействия.

Компоненты Blazor Hybrid не выполняются в браузере и WebAssembly не задействуется. При этом, компоненты имеют полный доступ к собственным возможностям устройства через платформу .NET.

Для того, чтобы создать приложение Blazor Hybrid нам потребуется .NET 6 или .NET 7 с дополнительной рабочей нагрузкой:

Первое приложение Blazor Hybrid

Попробуем создать наше первое приложение Blazor Hybrid и запустить его на нескольких платформах.

Создадим новый проект «Приложение .NET MAUI Blazor» ,выбрав в настройках MAUI:

Платформу выберем .NET 7

В итоге, мы создадим демонстрационное приложение Blazor Hybrid со следующей структурой:

Структура проекта Blazor Hybrid

Рассмотрим кратко структуру проекта:

• Папка Platforms содержит подкаталоги для каждой отдельной платформы. В каждой подпапке содержатся файлы кода C# для взаимодействия с определенной платформой. Например, раскроем папку Platforms/Android:

• Папка Resources содержит файлы ресурсов приложения: иконки приложения, шрифты, картинки и т.д.
• Файл App.xaml определяет ресурсы, общие для всего приложения, а файл App.xaml.cs содержит код C#, с которого начинается выполнение приложения
• Файл MainPage.xaml содержит компонент BlazorWebView в котором отображаются компоненты Razor, а в файле MainPage.xaml.cs содержится логику страницы MainPage на языке C#
• Файл MauiProgram.cs: содержит класс MauiProgram, который определяет стартовый класс приложения (класс App) и ряд общих для приложения настроек. В этом файле настраиваются шрифты приложения, подключаются сервисы и т.д.
• Файл Main.razor — содержит корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью компонента Router.
• Файл _Imports.razor содержит стандартные директивы Razor, включаемые в компоненты приложения (.razor), например директивы @using для пространств имен.
• Папка Pages — содержит маршрутизируемые компоненты или страницы (.razor), которые составляют приложение Blazor. Маршрут для каждой страницы указывается с помощью директивы @page. По умолчанию, папка содержит следующие компоненты:
  • Компонент Counter (Counter.razor) — реализует страницу счетчика.
  • Компонент FetchData (FetchData.razor) — реализует страницу получения данных (пример использования сервиса).
  • Компонент Index (Index.razor) — реализует страницу Home.
• Файл Properties/launchSettings.json — содержит конфигурацию среды разработки.
• Папка Shared — содержит общие для всего приложения компоненты:
  • Компонент MainLayout (MainLayout.razor) — компонент макета приложения.
  • Компонент NavMenu (NavMenu.razor) — реализует боковую панель навигации.
  • Компонент SurveyPrompt (SurveyPrompt.razor) — компонент опроса Blazor.
• Папка wwwroot — папка Web Root для приложения, содержащего общедоступные статические ресурсы приложения, включая css-файлы, js-скрипты, а также веб-страницу index.html — корневую страницу приложения Blazor, реализованную в виде обычной HTML-страницы.
• Папка Data — содержит C#-код сервисов и моделей, используемых в приложении. По умолчанию, в этой папке содержатся файлы сервиса получения данных для компонента FetchData (файл WeatherForecastService.cs) и модель данных (файл WeatherForecast.cs)

По составу, приложение Blazor Hybrid напоминает приложение Blazor WebAssembly, но, как было сказано выше, таковым по сути, не является. В зависимости от того в какой операционной системе запускается приложение, задействуются те или иные классы из папки Platforms, определяя при этом внешний вид приложения.

Запуск приложения Blazor Hybrid в различных операционных системах

Windows 11

Включите режим разработчика

Для запуска и тестирования приложения Blazor Hybrid в Windows 11 необходимо обязательно включить режим разработчика, иначе при первом запуске мы получим вот такую ошибку:

Режим разработчика включается в параметрах Windows «Конфиденциальность и защита —> Для разработчиков»

После этого, приложение запустится без проблем.

Visual Studio не запускает проект Blazor Hybrid

Если после включения режима разработчика в Windows Visual Studio продолжает выдавать ошибки при попытке запуска проекта и советует в меню проекта «Развернуть» приложение, то достаточно просто сохранить проект и перезагрузить Visual Studio.

Внешний вид приложение Blazor Hybrid в Windows:

Android

Для тестирования приложения Blazor Hybrid в Android мы можем воспользоваться двумя вариантами:

1. Использовать эмулятор Android
2. Воспользоваться смартфоном с Andoid

Использование эмулятора Android

Для запуска приложения на эмуляторе ОС Android необходимо в меню запуска приложения выбрать пункт «Android Emulator». При первом запуске запуститься Android Device Manager:

Создадим устройство по умолчанию. Для этого, в открывшемся окне нажмем кнопку «Create». Будет создано новое виртуальное устройство с Android 13 и начнется скачивание и распаковка необходимых для работы файлов

После установки и настройки всех необходимых файлов и компонентов мы сожем запустить новое виртуальное устройство

После того, как виртуальное устройство создано и готово к запуску, Android Device Manager можно закрыть. В Visual Studio можно увидеть, что приложение готово к запуску на эмуляторе Android:

Стоит отметить, что первый запуск приложения в Android может занять достаточно продолжительное время. Второй и последующие запуски проходят намного быстрее. Внешний вид приложения Blazor Hybrid в эмуляторе Android:

Использование физического устройства Android

Чтобы использовать для отладки физическое устройство андроид, в большинстве случаев, достаточно включить на устройстве режим разработчика, подключить устройство к компьютеру и в меню запуска приложения выбрать Локальное устройство Android:

При первом запуске приложения, возможно, появится запрос на установку приложения — необходимо этот запрос принять. Внешний вид приложения в Android:

Итого

Таким образом, Blazor Hybrid позволяет нам, используя навыки разработки приложений в Blazor, разрабатывать приложения для различных операционных систем. Проект Blazor Hybrid, в принципе, не сильно отличается по своей структуре от обычного приложения Blazor WebAssembly, поэтому, для разработки своего первого приложения нам практически не требуется никаких новых знаний. В дальнейшем мы продолжим рассмотрение приложений Blazor Hybrid.