Mit der Veröffentlichung von .NET MAUI 9 hat das HybridWebView-Steuerelement interessante Möglichkeiten für Entwickler geschaffen, die native Funktionen in hybride Anwendungen integrieren möchten. HybridWebView geht über den Funktionsumfang eines herkömmlichen WebView hinaus, indem es eine Brücke zwischen JavaScript und nativen APIs bietet. Dies ermöglicht eine direkte Kommunikation zwischen Webinhalten und nativen Funktionalitäten.
In diesem Artikel wird erläutert, wie das HybridWebView funktioniert, wie es eingerichtet wird und wie native APIs Webinhalten zur Verfügung gestellt werden können.
Was ist das HybridWebView?
Das HybridWebView ist ein Steuerelement in .NET MAUI 9, das speziell dafür entwickelt wurde, Webtechnologien und native Funktionen zu kombinieren. Es bietet:
- Aufruf von nativen Methoden durch JavaScript: Webinhalte können auf native Funktionen zugreifen, z. B. für Gerätefunktionen wie Geolocation, Kamera oder Dateizugriff.
- Ausführung von JavaScript durch .NET-Code: Native Anwendungen können mit JavaScript-Logik in Webinhalten interagieren.
Diese Funktionalität eignet sich besonders für Szenarien, in denen eine hybride App von den Vorteilen einer Weboberfläche und der Leistungsfähigkeit nativer Funktionen profitieren soll.
Native APIs für Webinhalte verfügbar machen
Ein zentrales Feature des HybridWebView ist die Möglichkeit, native APIs für Webinhalte zu öffnen. Dies geschieht über einen JavaScript-Bridge-Mechanismus, der die Kommunikation in beide Richtungen ermöglicht.
Dazu wird eine JavaScript-Methode (siehe Dokumentation) implementiert, die Aufrufe nativer APIs an diese deligiert:
async function CallNativeApi() {
const result = await window.HybridWebView.InvokeDotNet("CallCsharpApi");
// use result ...
}
Aufruf nativer Funktionen aus JavaScript
Webinhalte können definierte native Funktionen über eine standardisierte Schnittstelle aufrufen. Dies ist nützlich, um spezifische Gerätefunktionen oder API-Endpunkte, die nur auf der nativen Plattform verfügbar sind, zu nutzen.
Die Registrierung kann Beispielsweise im Code-Behind einer MAUI Page erfolgen:
public MainPage()
{
InitializeComponent();
HybridWebView.SetInvokeJavaScriptTarget(this);
}
// Method name used in JavaScript call
public MyResult CallCsharpApi(){
// Access native .NET and .NET MAUI APIs
}
In den unten genannten Links, findet ihr neben der Dokumentation zur HybridWebView auch ein Beispiel, dass einige native APIs zur WebView exponiert.
JavaScript aus .NET aufrufen
Neben der Möglichkeit, native Funktionen aus JavaScript aufzurufen, erlaubt das HybridWebView auch die umgekehrte Kommunikation. .NET-Code kann JavaScript-Funktionen im geladenen Webinhalt ausführen. Dies eignet sich besonders, um dynamische Interaktionen oder Aktualisierungen im Webinhalt zu steuern.
Unser Beispiel und dieser Blogpost zeigen diesen Fall aber nicht. Schau dir dazu die sehr gute Dokumentation zur HybridWebView an.
Anwendungsszenarien
Das HybridWebView kann in verschiedenen Szenarien sinnvoll eingesetzt werden:
- Einbindung komplexer Webanwendungen: Bestehende Weblösungen können in native Anwendungen integriert werden, ohne auf Gerätefunktionen verzichten zu müssen.
- Single Page Apps mit nativen Erweiterungen: SPAs können um Funktionen wie Dateizugriff, Geolocation oder Geräteintegration ergänzt werden.
- Hybride Anwendungsfälle: Webbasierte UIs können entwickelt und die Daten lokal oder nativ verarbeitet werden.
Fazit
Das HybridWebView in .NET MAUI 9 bietet eine elegante Lösung für hybride Anwendungen, die Webtechnologien und native Funktionen verbinden. Es ist flexibel, leistungsstark und eröffnet neue Möglichkeiten für die Entwicklung von Apps, die das Beste aus beiden Welten kombinieren.
Für Entwickler, die hybride Lösungen suchen, ist das HybridWebView ein wertvolles Werkzeug, das sich leicht integrieren lässt.