Déploiement WebView2 - Programme d’installation de Visual Studio

Cet exemple, WV2DeploymentVSInstallerSample, montre comment déployer une application WebView2 à l’aide du programme d’installation de Visual Studio.

• Exemple de nom : WV2DeploymentVSInstallerSample
• Répertoire du référentiel : WV2DeploymentVSInstallerSample
• Fichier de solution : non fourni dans le référentiel. Vous créez un fichier solution dans les étapes ci-dessous.

Pour montrer comment déployer le runtime Evergreen WebView2 avec votre application, cet article explique comment utiliser l’extension Microsoft Visual Studio Installer Project pour Visual Studio. Vous créez un projet de type Projet d’installation pour créer un programme d’installation pour l’exemple d’application Win32 (WebView2APISample). Ce programme d’installation que vous créez en chaîne installe le runtime WebView2 Evergreen.

Vous modifiez d’abord le project.xml fichier à partir du référentiel, puis, dans Visual Studio, vous créez un projet à l’aide du modèle de projet d’installation du projet à partir de l’extension Microsoft Visual Studio Installer Projects.

Cet exemple illustre plusieurs approches de déploiement différentes :

• Téléchargement du programme d’amorçage Evergreen WebView2 Runtime à l’aide d’un lien.
• Empaquetage du programme d’amorçage Evergreen WebView2 Runtime avec votre application.
• Empaquetage du programme d’installation autonome du runtime Evergreen WebView2 avec votre application.

Pour plus d’informations sur ces différentes approches, consultez Déploiement du runtime Evergreen WebView2 dans Distribuer votre application et le runtime WebView2.

Étape 1 : Générer et exécuter WebView2APISample

Pour vous familiariser avec l’application distribuée par cet exemple et vous assurer que votre environnement est configuré pour le développement général d’applications Win32 WebView2, générez et exécutez l’exemple d’application Win32 (WebView2APISample) avant d’utiliser cet exemple de déploiement.

1. Effectuez les étapes de l’exemple d’application Win32 (WebView2APISample), puis continuez ci-dessous.

Prérequis : Comme indiqué dans la page ci-dessus, Microsoft Visual Studio est requis, y compris la prise en charge de C++. Microsoft Visual Studio Code n’est pas pris en charge pour cet exemple WV2DeploymentVSInstallerSample .

La page ci-dessus vous permet de cloner ou de télécharger le dépôt WebView2Samples et d’installer Visual Studio avec prise en charge de C++, si ce n’est pas encore fait.

Étape 2 : Installer des projets Visual Studio Installer

Si ce n’est pas encore fait, installez Visual Studio Installer Projects :

1. Installez Microsoft Visual Studio Installer Projects pour Visual Studio 2019. Suivez les étapes de cette page, puis revenez à cette page et continuez les étapes ci-dessous.

Si une boîte de dialogue En attente des processus suivants pour arrêter s’affiche, fermez Visual Studio.

Étape 3 : Modifier product.xml pour configurer la distribution du runtime WebView2

1. Ouvrez Visual Studio. Dans l’écran d’ouverture, vous pouvez cliquer sur le lien Continuer sans code en bas à droite.

2. Ouvrez le fichier individuel suivant qui se trouve dans votre copie locale du dépôt : <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\product.xml

   Emplacement du fichier dans le dépôt sur GitHub : SampleApps/WV2DeploymentVSInstallerSample/product.xml

   

3. Inspectez product.xml. Il y a trois <PackageFile> lignes. Étudiez le commentaire ci-dessus chacune des 3 lignes. Voici une vue simplifiée des lignes, avec des précisions.

   La première <PackageFile> ligne utilise le fichier MicrosoftEdgeWebview2Setup.exe, qui est le programme d’amorçage Evergreen WebView2 Runtime, et spécifie un HomeSite site web. Utilisez cette ligne pour l’approche 1 : Téléchargement du programme d’amorçage du runtime Evergreen WebView2 via un lien :

   <!-- Download the MicrosoftEdgeWebview2Setup.exe -->
   <!-- <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/> -->
   

   La deuxième <PackageFile> ligne utilise le fichier MicrosoftEdgeWebview2Setup.exe, qui est le programme d’amorçage Runtime Evergreen WebView2. Utilisez cette ligne pour l’approche 2 : Empaquetage du programme d’amorçage du runtime Evergreen WebView2 avec l’application :

   <!-- Package the MicrosoftEdgeWebview2Setup.exe -->
   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

   La troisième <PackageFile> ligne utilise le fichier MicrosoftEdgeWebView2RuntimeInstallerX64.exe, qui est un programme d’installation autonome d’Evergreen WebView2 Runtime spécifique à la plateforme. Utilisez cette ligne pour l’approche 3 : Empaquetage du programme d’installation autonome du runtime Evergreen WebView2 avec votre application :

   <!-- Package the WebView Standalone Installer -->
   <!-- <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" /> -->
   

4. Identifiez l’approche que vous utilisez. L’approche 2 est la valeur par défaut ; autrement dit, la ligne à utiliser à l’approche 2 n’est pas commentée dans le fichier du product.xml dépôt.

5. Modifiez product.xml, comme suit ; effectuez les étapes de l’une des trois sections ci-dessous.

Approche 1 : Téléchargement du programme d’amorçage du runtime Evergreen WebView2 via un lien

Si vous souhaitez que l’application télécharge le programme d’amorçage du runtime Evergreen WebView2 (MicrosoftEdgeWebview2Setup.exe) via un lien :

1. Dans la <PackageFiles CopyAllPackageFiles="false"> section , supprimez les commentaires de la ligne suivante (conservez la valeur de clé publique longue) et commentez les autres lignes :

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/>
   

2. La PublicKey valeur du programme d’amorçage du runtime WebView2 peut changer sans préavis. Nous travaillons à la résolution de ce problème. Pour l’instant, vous devrez peut-être le remplacer par product.xml une valeur mise à jour PublicKey .

3. Dans la <Commands Reboot="Defer"> section et </Commands> , vérifiez PackageFile que pointe vers "MicrosoftEdgeWebview2Setup.exe" afin que le programme d’installation de Visual Studio utilise le programme d’amorçage.

4. Enregistrez le fichier.

Approche 2 : Empaquetage du programme d’amorçage du runtime Evergreen WebView2 avec l’application

Si vous souhaitez empaqueter le programme d’amorçage Runtime Evergreen WebView2 (MicrosoftEdgeWebview2Setup.exe) avec l’application :

1. Dans la <PackageFiles CopyAllPackageFiles="false"> section , supprimez le commentaire de la ligne suivante et commentez les autres lignes :

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

2. Dans la <Commands Reboot="Defer"> section , vérifiez PackageFile que pointe vers "MicrosoftEdgeWebview2Setup.exe" afin que le programme d’installation de Visual Studio utilise le programme d’amorçage.

3. Enregistrez le fichier.

Approche 3 : Empaquetage du programme d’installation autonome du runtime Evergreen WebView2 avec votre application

Si vous souhaitez empaqueter le programme d’installation autonome du runtime Evergreen WebView2 avec l’application :

1. Dans la <PackageFiles CopyAllPackageFiles="false"> section , supprimez le commentaire de la ligne suivante et commentez les autres lignes :

   <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />
   

2. Dans la <Commands Reboot="Defer"> section et </Commands> , vérifiez PackageFile que pointe vers "MicrosoftEdgeWebView2RuntimeInstallerX64.exe" afin que le programme d’installation de Visual Studio utilise le programme d’installation autonome.

3. Si vous ciblez des appareils non-X64, modifiez le nom de MicrosoftEdgeWebView2RuntimeInstallerX64 fichier pour refléter l’architecture correcte.

4. Enregistrez le fichier.

Étape 4 : Télécharger le programme d’amorçage WebView2 ou le programme d’installation autonome

Si vous souhaitez empaqueter le programme d’amorçage (approche 2) ou le programme d’installation autonome (approche 3) avec l’application, effectuez les étapes décrites dans cette section. Sinon, passez à la section Étape principale suivante.

1. Téléchargez le programme d’amorçage Microsoft Edge WebView2 ou le programme d’installation autonome.

2. Enregistrez le programme d’amorçage téléchargé ou le programme d’installation autonome sous le <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ dossier .

Étape 5 : Copier le dossier WV2DeploymentVSInstallerSample dans un dossier Packages

Cette étape s’applique à toutes les approches (1, 2 ou 3).

1. Copiez le <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ dossier et collez-le dans l’un des dossiers suivants :

   • <drive>:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\

   • <Visual Studio install dir>\MSBuild\Microsoft\VisualStudio\BootstrapperPackages\ (nécessite au moins Visual Studio 2019 Update 7)

   Chemin d’accès classique pour <Visual Studio install dir>:

   • C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\Common7\IDE\

Étape 6 : Créer un projet d’installation dans Visual Studio

1. Dans Visual Studio, sélectionnez Fichier>Nouveau>Projet. La fenêtre Créer un projet s’affiche.

2. Dans la zone de texte Rechercher des modèles , entrez projet d’installation, puis sélectionnez le modèle Projet d’installation . Veillez à sélectionner le modèle nommé exactement comme indiqué ci-dessous :

   

3. Cliquez sur le bouton Suivant .

   La boîte de dialogue Configurer votre nouveau projet : Configurer le projet s’ouvre, comme indiqué ci-dessous.

4. Dans la zone de texte Nom du projet , entrez un nom, par exemple MyWin32WV2DeploySample.

5. Dans la zone de texte Emplacement , accédez à un emplacement qui n’est pas à l’intérieur d’un autre répertoire de projet, par <repo-path>\WebView2Samples\ exemple ou à un emplacement qui n’est pas dans le répertoire du dépôt.

   

6. Cliquez sur le bouton Créer.

   

Étape 7 : Ajouter le runtime WebView2 en tant que prérequis

1. Dans Visual Studio, dans Explorateur de solutions, cliquez avec le bouton droit sur votre projet, puis sélectionnez Propriétés. La boîte de dialogue Pages de propriétés s’ouvre.

2. Cliquez sur le bouton Prérequis :

   

3. Cochez la case Runtime Edge WebView2 .

   Si cette case à cocher n’est pas répertoriée, cela peut indiquer qu’un fichier nécessaire n’a pas été placé dans un dossier Packages. Vérifiez l’approche que vous utilisez. Vous devrez peut-être effectuer les étapes ci-dessus, dans les sections Étape 4 - Télécharger le programme d’amorçage WebView2 ou programme d’installation autonome et Étape 5 - Copier le dossier WV2DeploymentVSInstallerSample dans un dossier Packages.

4. Décochez les autres conditions préalables. Cliquez ensuite sur le bouton OK :

   

Étape 8 : Générer le projet d’installation

1. Appuyez sur F5 pour enregistrer et générer le projet d’installation.

Voir aussi

• Fichier README pour WV2DeploymentVSInstallerSample