Composants de la plateforme WebView2

Pour ajouter WebView2 à votre application, vous devez utiliser le SDK WebView2 sur votre ordinateur de développement et distribuer le runtime WebView2 aux ordinateurs des utilisateurs.

Contenu détaillé :

Composants sur la machine de développement et les ordinateurs des utilisateurs

Pour ajouter WebView2 à votre application, vous devez utiliser le SDK WebView2 sur votre ordinateur de développement et distribuer le runtime WebView2 aux ordinateurs des utilisateurs.

Composants WebView2 de niveau supérieur

Terme abrégé Description
Application Toute application, pour n’importe quel framework ou plateforme, qui inclut une instance du contrôle WebView2. Une application peut avoir des zones qui utilisent une instance de contrôle WebView2 et d’autres zones qui n’utilisent pas le contrôle.
Kit de développement logiciel (SDK) SDK WebView2. Lorsqu’une partie de votre application utilise WebView2, ce code peut appeler ces API conjointement avec des instances du contrôle WebView2. Le SDK Release est fourni aux utilisateurs et contient uniquement des API stables. Le SDK de la version préliminaire est uniquement utilisé par les développeurs et contient quelques API expérimentales.
Contrôle Une instance du contrôle WebView2. Dans une application, apparaît généralement sous la forme d’une zone rectangulaire qui contient du contenu web.
Runtime Le runtime WebView2, qui est un moteur de navigateur. Installé sur les ordinateurs des utilisateurs, ainsi que sur les machines de développement et de test.
Canal d’aperçu Un canal d’aperçu de Microsoft Edge, soit Bêta (quasi-stable), Dev ou Canary (la toute dernière build ; quotidienne). Pour les machines de développement et de test uniquement, pas pour les machines utilisateur.

Contrôle WebView2, SDK et Runtime

Le contrôle WebView2, le SDK WebView2 et le runtime WebView2 ont les rôles suivants :

Composant Role
WebView2 SDK Fournit des API que les développeurs peuvent utiliser dans le code d’une application. Utilisé par Dev localement lors du codage de l’application. Deux versions : Prerelease SDK pour les tests de développement locaux et Release SDK pour le développement de code livrable pour les utilisateurs.
Contrôle WebView2 Vous intégrez le contrôle WebView2 dans l’application. Héberge le runtime ; Sert de zone visible pour afficher du contenu web.
WebView2 Runtime Sur la machine de test de Dev et sur les machines des utilisateurs. Ou, au lieu d’utiliser le Runtime, le développeur peut utiliser un canal d’aperçu de Microsoft Edge pour les tests locaux, lors de l’utilisation de la version préliminaire du Kit de développement logiciel (SDK).

Diagramme des composants WebView2 de haut niveau

Le diagramme suivant montre les composants WebView2 de haut niveau sur votre ordinateur de développement et vos ordinateurs utilisateur :

Application sur la machine de développement et la machine de l’utilisateur

Machine de développement

Cette section explique la colonne de gauche du diagramme ci-dessus.

Votre machine de développement, pour le développement d’une application WebView2, se compose des composants suivants :

  • Projet Visual Studio : utilisez un modèle de projet Visual Studio pour créer une application de plateforme standard, puis ajoutez le Kit de développement logiciel (SDK) WebView2 au projet en tant que package NuGet.

    • Concepteur de disposition : disposez vos commandes dans Visual Studio.

      • Instances de contrôle WebView2 : zones de contenu Web de votre application. Le code côté web de l’application s’exécute dans ce contrôle.

      • Instances de contrôle natives : contrôles et volets natifs de votre application.

    • SDK WebView2.

      • API WebView2 par plateforme, y compris CoreWebView2, CoreWebView2Controlleret CoreWebView2Environment. Principalement appelé par le code côté natif.

      • AddHostObjectToScript - Permet d’exposer les API de plateforme et les API WebView2 au code JavaScript. Voir l’interopérabilité du code natif et web

      • API JavaScript (paquet WebView2Script) : appelées par le code côté web pour communiquer avec l’application hôte.

    • API de plateforme - API non WebView2 fournies par la plateforme web ; utilisés par votre code côté web.

  • Runtime WebView2 : composant de navigateur Microsoft Edge qui contient des API WebView2 et exécute votre code côté web.

Ordinateur utilisateur

Cette section explique la colonne de droite du diagramme ci-dessus.

Sur l’ordinateur de l’utilisateur final se trouvent les composants suivants impliqués dans l’exécution d’une application WebView2 :

  • L’application hôte que l’utilisateur a installée et utilise.

    • Code natif WebView2 : votre code natif qui utilise les API WebView2.

    • Code web : votre code côté web qui s’exécute dans une instance de contrôle WebView2.

    • Instances de contrôle WebView2 : le code côté web de l’application WebView2 s’exécute dans un contrôle WebView2.

    • Code natif non WebView2.

    • Code web non-WebView2.

    • Instances de contrôle natives.

  • Le runtime WebView2.

Kit de développement logiciel (SDK) de version préliminaire avec exécution préliminaire ou SDK de version avec exécution stable

Vous utilisez l’une ou l’autre combinaison :

  • Un kit de développement logiciel (SDK) WebView2 Prerelease avec un canal d’aperçu de Microsoft Edge (Beta, Dev ou Canary), qui inclut le runtime de préversion WebView2.
  • Un kit de développement logiciel (SDK) WebView2 Release avec le runtime WebView2.
Type de SDK WebView2 Plateforme de rendu Scénario
Kit de développement logiciel (SDK) version préliminaire Un runtime de préversion WebView2, inclus dans un canal de préversion de Microsoft Edge (Beta, Dev ou Canary) Pour expérimenter et tester votre application par rapport aux modifications à venir, sur vos ordinateurs de développement.
Libérer le SDK A WebView2 Stable Runtime Pour expédier votre application aux utilisateurs finaux.

Contrôle WebView2, Runtime et SDK

Ce diagramme présente le plan suivant :

Kit de développement logiciel (SDK) WebView2 Prerelease :

  • API .NET/C#, y compris les API expérimentales.
  • API WinRT/C#, y compris les API expérimentales.
  • API Win32/C++, y compris les API expérimentales.
  • Package WebView2Script (API JavaScript).

La version préliminaire du Kit de développement logiciel (SDK) utilise un canal d’aperçu de Microsoft Edge, qui inclut :

  • Le runtime de préversion WebView2.
  • Le package WebView2Script (API JavaScript).

Kit de développement logiciel (SDK) WebView2 Release :

  • API .NET/C#.
  • WinRT/C#.
  • Win32/C++.
  • Package WebView2Script (API JavaScript).

Le SDK Release utilise le runtime WebView2 (webView2 Stable Runtime).

  • Le runtime inclut le package WebView2Script (API JavaScript).

Vous téléchargez régulièrement la dernière version du Kit de développement logiciel (SDK) à partir de NuGet. Les liens NuGet se trouvent dans les notes de publication du SDK WebView2.

Le Kit de développement logiciel (SDK) inclut l’API JavaScript, qui se trouve dans le WebView2Script package.

Voir aussi :

Utilisation d’un SDK en préversion et d’API expérimentales avec un canal d’aperçu de Microsoft Edge

Pour développer la version préliminaire de votre application à l’aide d’API expérimentales, ou pour tester votre application par rapport aux prochaines modifications du Kit de développement logiciel (SDK) :

  • Sur votre machine de développement, dans le projet Visual Studio, installez une version préliminaire du package Kit de Microsoft.Web.WebView2 développement logiciel (SDK) NuGet. Écrire du code qui utilise les API expérimentales (et les API stables).
  • Sur votre machine de développement, installez et utilisez un canal d’aperçu de Microsoft Edge.

Pour distribuer votre version préliminaire de l’application sur votre machine de test :

  • Sur votre machine de test, installez un canal d’aperçu de Microsoft Edge.

Voir aussi :

Utilisation d’un SDK Release et d’API stables avec le Runtime

Pour développer la version commerciale de votre application :

  • Sur votre machine de développement, dans le projet Visual Studio, installez une version commerciale du package Kit de Microsoft.Web.WebView2développement logiciel (SDK) NuGet. Écrire du code qui utilise uniquement les API stables .
  • Sur votre machine de développement, utilisez le runtime WebView2 (qui fait partie du package SDK).

Le runtime WebView2 est comme un moteur de navigateur que vous pouvez utiliser en tant que composant de votre application.

Il existe plusieurs façons de distribuer votre application et le Runtime aux utilisateurs. La section Méthodes de distribution, d’installation et de mise à jour du runtime sur l’ordinateur de l’utilisateur ci-dessus.

Voir aussi :

Architecture de conception d’une application WebView2

Une application hôte contient les catégories de composants suivantes :

  • Instances de contrôle natives.
  • Instances de contrôle WebView2.

Une application hôte contient également les catégories de code suivantes :

  • Le code natif, qui appelle les API de plateforme natives.
  • Code natif, qui appelle API WebView2.
  • Code web (JavaScript), qui appelle les API WebView2Script, les API natives exposées et les API de plateforme web.

Architecture de conception d’une application WebView2

Méthodes de distribution, d’installation et de mise à jour du Runtime sur l’ordinateur de l’utilisateur

Il existe plusieurs façons de distribuer WebView2 Runtime avec votre application :

Approches de distribution du runtime WebView2

Nom de l’approche de distribution Description Notes
Lien vers le programme d’amorçage d’Evergreen Runtime Dans le programme d’installation de votre application, accédez au bootstrap d’Evergreen Runtime. Demandez au programme d’installation de votre application d’utiliser ce lien pour télécharger et installer par programme le programme d’amorçage Evergreen sur l’ordinateur de l’utilisateur. Appelez ensuite le programme d’amorçage pour installer le runtime approprié pour l’appareil de l’utilisateur. Pour les utilisateurs disposant d’une connexion en ligne. Le bootstrapper Evergreen est un petit installateur qui installe le bon Runtime pour le processeur de l’utilisateur, en utilisant une connexion Internet.
Créer un package d’amorçage Evergreen Runtime Téléchargez le bootstrapper Evergreen sur votre machine de développement. Empaquetez et distribuez le bootstrapper Evergreen avec votre programme d’installation d’application. Ensuite, votre programme d’installation appelle le programme d’amorçage pour installer le runtime sur l’ordinateur de l’utilisateur. Pour les utilisateurs qui n’ont pas de connexion fiable au site CDN d’amorçage.
Créer un package d’installation autonome d’Evergreen Runtime Téléchargez le programme d’installation autonome Evergreen sur votre machine de développement et empaquetez-le avec votre application. Empaquetez le programme d’installation autonome Evergreen avec le programme d’installation de votre application. Le programme d’installation de votre application appelle ensuite le programme d’installation autonome Evergreen pour installer le runtime sur l’appareil de l’utilisateur. Pour les utilisateurs hors connexion. Grand programme d’installation autonome d’Evergreen Runtime pour les utilisateurs hors connexion, qui inclut Evergreen Runtime.
Créer un package d’un Runtime de version fixe Téléchargez un Runtime spécifique à la version et au processeur sur votre ordinateur de développement. Empaquetez et distribuez la version fixe du runtime avec le programme d’installation de votre application. Le programme d’installation de votre application installe la version fixe spécifique du runtime sur l’ordinateur de l’utilisateur. Cas de spécialité, lorsque vous avez besoin d’une version spécifique des API ; évite de tester si les dernières API sont disponibles.

Les approches ci-dessus sont répertoriées dans le même ordre que dans la section Télécharger le runtime WebView2 de la page WebView2 de Microsoft Edge, des approches légères aux approches lourdes. Privilégiez les approches légères ; Utilisez une approche lourde si un scénario spécialisé l’exige.

Le programme d’installation de votre application désigne le programme d’installation/de mise à jour de votre application, qui peut être distinct de votre application ou faire partie de votre application.

Voir aussi :

Communication avec un serveur HTTP

Le contrôle WebView2 agit comme un intermédiaire pour la communication entre l’application hôte et le serveur HTTP.

Application hôte, contrôle WebView2 et serveur HTTP

Voir aussi

developer.microsoft.com :

Ressources pour le développement d’applications WebView2 :

  • Dernière mise à jour :