Neue Funktionen in .NET MAUI 03.09.2024, 11:25 Uhr

HybridWebView: Brücke zwischen Web und .NET MAUI

Mit HybridWebView können Entwickler HTML, CSS und JavaScript nahtlos in ihre nativen Anwendungen integrieren. Das Control ist in .NET MAUI 9 Preview 7 enthalten.
(Quelle: dotnetpro)
HybridWebView ermöglicht es, verschiedene Webinhalte einfach zu integrieren, indem HTML, JavaScript und CSS in einer Webansicht untergebracht werden. Dieses Feature eröffnet neue Möglichkeiten für den Einsatz von Frameworks wie ReactJS oder Angular, da Entwickler nun in der Lage sind, ihre Webanwendungen innerhalb einer nativen .NET MAUI-Anwendung zu betreiben. Dabei hilft die hybride Architektur, die Flexibilität und Leistung zu maximieren.
Um eine Anwendung mit HybridWebView zu erstellen, benötigen die Entwickler zunächst die Webinhalte, die als statische Dateien im Projekt angelegt werden. Diese Dateien, darunter HTML, CSS und JavaScript, werden in der Regel im Verzeichnis "Resources\Raw\wwwroot" des .NET MAUI-Projekts gespeichert. Das Hauptdokument dieser Anwendung trägt normalerweise den Namen "index.html". Diese Struktur ermöglicht es, neben dem Haupt-UI-Dokument auch weitere Ressourcen wie Bilder und Stile einfach zu verwalten.
Das HybridWebView Control wird innerhalb der XAML-Datei der Anwendung integriert. Dies geschieht, indem die spezifische Steuerung zum Layout hinzugefügt wird und entsprechende API-Aufrufe für die Kommunikation zwischen JavaScript und C# verfasst werden. Das API von HybridWebView ermöglicht das Senden von Nachrichten zwischen den beiden Teilen der Anwendung, wodurch eine bidirektionale Kommunikation realisiert wird.
Die Notwendigkeit, Nachrichten zwischen der Webanwendung und der nativen Anwendung auszutauschen, wird durch die Implementierung eines einfachen JavaScript-Handlers ermöglicht. Hiermit lässt sich nicht nur Information austauschen, sondern auch die Interaktivität steigern. Ein Beispiel könnte das Versenden einer Nachricht von der Webansicht an die C#-Logik der App sein, die z.B. eine Benachrichtigung anzeigen kann.


Das könnte Sie auch interessieren