Avec la sortie de .NET MAUI 9, le contrôle HybridWebView ouvre des possibilités intéressantes pour les développeurs qui souhaitent intégrer des fonctions natives dans des applications hybrides. HybridWebView va au-delà d'un WebView classique en fournissant un pont entre JavaScript et les API natives. Cela permet une communication directe entre les contenus web et les fonctionnalités natives.
Dans cet article, nous expliquons comment fonctionne HybridWebView, comment le configurer et comment mettre des API natives à disposition des contenus web.
Qu'est-ce que HybridWebView ?
HybridWebView est un contrôle de .NET MAUI 9 spécialement conçu pour combiner technologies web et fonctionnalités natives. Il permet :
- D'appeler des méthodes natives depuis JavaScript : les contenus web peuvent accéder à des fonctions natives, par exemple la géolocalisation, la caméra ou l'accès aux fichiers.
- D'exécuter du JavaScript depuis du code .NET : les applications natives peuvent interagir avec la logique JavaScript d'un contenu web.
Cette fonctionnalité est particulièrement utile dans les scénarios où une application hybride doit profiter à la fois des avantages d'une interface web et de la puissance des fonctions natives.
Exposer des API natives aux contenus web
L'une des fonctionnalités centrales de HybridWebView est la possibilité d'exposer des API natives aux contenus web. Cela passe par un mécanisme de pont JavaScript qui permet la communication dans les deux sens.
Pour cela, on implémente une méthode JavaScript, comme décrit dans la documentation, qui délègue les appels à des API natives :
async function CallNativeApi() {
const result = await window.HybridWebView.InvokeDotNet("CallCsharpApi");
// use result ...
}
Appeler des fonctions natives depuis JavaScript
Les contenus web peuvent appeler des fonctions natives définies via une interface standardisée. C'est utile pour accéder à des fonctionnalités spécifiques de l'appareil ou à des endpoints API disponibles uniquement sur la plateforme native.
L'enregistrement peut par exemple se faire dans le code-behind d'une page MAUI :
public MainPage()
{
InitializeComponent();
HybridWebView.SetInvokeJavaScriptTarget(this);
}
// Method name used in JavaScript call
public MyResult CallCsharpApi(){
// Access native .NET and .NET MAUI APIs
}
Dans les liens ci-dessous, vous trouverez non seulement la documentation HybridWebView, mais aussi un exemple qui expose plusieurs API natives à la WebView.
Appeler JavaScript depuis .NET
Outre la possibilité d'appeler des fonctions natives depuis JavaScript, HybridWebView permet aussi la communication inverse. Le code .NET peut exécuter des fonctions JavaScript dans le contenu web chargé. Cela est particulièrement utile pour piloter des interactions dynamiques ou des mises à jour dans le contenu web.
Notre exemple et cet article ne couvrent cependant pas ce cas. Pour cela, consultez l'excellente documentation HybridWebView.
Cas d'usage
HybridWebView peut être utilisé dans différents scénarios :
- Intégration d'applications web complexes : des solutions web existantes peuvent être intégrées dans des applications natives sans renoncer aux fonctions de l'appareil.
- Single Page Apps avec extensions natives : les SPA peuvent être enrichies avec des fonctions comme l'accès aux fichiers, la géolocalisation ou l'intégration à l'appareil.
- Scénarios hybrides : il est possible de développer des interfaces basées sur le web tout en traitant les données localement ou nativement.
Conclusion
HybridWebView dans .NET MAUI 9 offre une solution élégante pour les applications hybrides qui doivent combiner technologies web et fonctions natives. C'est une approche flexible, puissante et qui ouvre de nouvelles possibilités pour développer des applications profitant du meilleur des deux mondes.
Pour les développeurs à la recherche de solutions hybrides, HybridWebView est un outil précieux qui s'intègre facilement.
Besoin d'aide ?
Vous souhaitez développer des applications hybrides avec .NET MAUI et combiner des API natives avec des technologies web, mais vous hésitez sur la mise en œuvre ? Nous pouvons vous aider. Contactez-nous via notre page de contact et voyons ensemble comment réussir le développement de votre application mobile.
