Komponenten der WebView2-Plattform

Um WebView2 zu Ihrer App hinzuzufügen, verwenden Sie das WebView2 SDK auf Ihrem Entwicklungscomputer und verteilen die WebView2-Runtime an Benutzercomputer.

Detaillierter Inhalt:

Komponenten auf dem Entwicklungscomputer und den Benutzercomputern

Um WebView2 zu Ihrer App hinzuzufügen, verwenden Sie das WebView2 SDK auf Ihrem Entwicklungscomputer und verteilen die WebView2-Runtime an Benutzercomputer.

WebView2-Komponenten der obersten Ebene

Kurzform Beschreibung
App Jede App für jedes Framework oder jede Plattform, die eine Instance des WebView2-Steuerelements enthält. Eine App kann Bereiche haben, die eine WebView2-Steuerelement-Instance verwenden, und andere Bereiche, die das Steuerelement nicht verwenden.
SDK Das WebView2 SDK. Wenn ein Teil Ihrer App WebView2 verwendet, kann dieser Code diese APIs in Verbindung mit Instanzen des WebView2-Steuerelements aufrufen. Das Release SDK wird an Benutzer ausgeliefert und enthält nur stabile APIs. Das Prerelease-SDK wird nur von Entwicklern verwendet und enthält einige experimentelle APIs.
Control Eine instance des WebView2-Steuerelements. In einer App wird es normalerweise als rechteckiger Bereich angezeigt, der Webinhalte enthält.
Laufzeit Die WebView2-Runtime, bei der es sich um ein Browser-Modul handelt. Installiert auf Benutzercomputern sowie auf Entwicklungs- und Testcomputern.
Kanalvorschau Ein Vorschaukanal von Microsoft Edge, entweder Beta (nahezu stabil), Dev oder Canary (der neueste Build; täglich). Nur für Entwicklungs- und Testcomputer, nicht für Benutzercomputer.

WebView2-Steuerelement, SDK und Laufzeit

Das WebView2-Steuerelement, das WebView2-SDK und die WebView2-Runtime haben die folgenden Rollen:

Komponente Rolle
WebView2 SDK Stellt APIs für Entwickler zur Verwendung im Code einer App bereit. Wird von Dev lokal beim Codieren der App verwendet. Zwei Versionen: Vorabversions-SDK für lokale Entwicklungstests und Release-SDK für die Entwicklung von auslieferbarem Code für Benutzer.
WebView2-Steuerelement Sie betten das WebView2-Steuerelement in die App ein. Hostet die Laufzeit; Dient als sichtbarer Bereich zur Anzeige von Webinhalten.
WebView2 Runtime Auf dem Testcomputer des Entwicklers und auf den Benutzercomputern. Anstatt die Runtime zu verwenden, kann Dev einen Vorschaukanal von Microsoft Edge für lokale Tests verwenden, wenn es das Vorabversions-SDK verwendet.

Diagramm der allgemeinen WebView2-Komponenten

Das folgende Diagramm zeigt die allgemeinen WebView2-Komponenten auf Ihrem Entwicklungscomputer und den Benutzercomputern:

App auf dem Entwicklungscomputer und Benutzercomputer

Entwicklungscomputer

In diesem Abschnitt wird die linke Spalte des obigen Diagramms erläutert.

Ihr Entwicklungscomputer zum Entwickeln einer WebView2-App besteht aus den folgenden Komponenten:

  • Visual Studio-Projekt: Verwenden Sie eine Visual Studio-Projektvorlage, um eine Standardplattform-App zu erstellen, und fügen Sie dem Projekt dann das WebView2 SDK als NuGet-Paket hinzu.

    • Layout-Designer: Gestalten Sie Ihre Steuerelemente in Visual Studio.

      • WebView2-Steuerelementinstanzen – Webinhaltsbereiche Ihrer App. Der webseitige Code der App wird in diesem Steuerelement ausgeführt.

      • Native Steuerelementinstanzen: Native Steuerelemente und Bereiche Ihrer App.

    • Das WebView2 SDK.

      • Plattformspezifische WebView2-APIs, einschließlich CoreWebView2, CoreWebView2Controller, und CoreWebView2Environment. Wird hauptsächlich von systemeigenem Code aufgerufen.

      • AddHostObjectToScript – Ermöglicht die Bereitstellung von Plattform-APIs und WebView2-APIs für JavaScript-Code. Siehe Interoperabilität von systemeigenem und Webcode

      • JavaScript-APIs (WebView2Script-Paket): Wird von webseitigem Code aufgerufen, um mit der Hostanwendung zu kommunizieren.

    • Plattform-APIs – Nicht-WebView2-APIs, die von der Webplattform bereitgestellt werden; Wird von Ihrem webseitigen Code verwendet.

  • WebView2-Runtime: Microsoft Edge-Browserkomponente, die WebView2-APIs enthält und Ihren webseitigen Code ausführt.

Benutzercomputer

In diesem Abschnitt wird die rechte Spalte des obigen Diagramms erläutert.

Auf dem Endbenutzercomputer befinden sich die folgenden Komponenten, die an der Ausführung einer WebView2-App beteiligt sind:

  • Die Host-App, die der Benutzer installiert hat und verwendet.

    • Nativer WebView2-Code: Ihr nativer Code, der WebView2-APIs verwendet.

    • Webcode: Ihr webseitiger Code, der in einer WebView2-Steuerelement-Instance ausgeführt wird.

    • WebView2-Steuerelementinstanzen: Der webseitige Code der WebView2-App wird in einem WebView2-Steuerelement ausgeführt.

    • Nicht WebView2-nativer Code.

    • Nicht-WebView2-Webcode.

    • Native Steuerungsinstanzen.

  • Die WebView2 Runtime.

Vorabversions-SDK mit Preview-Laufzeit oder Release-SDK mit stabiler Laufzeit

Sie verwenden eine der beiden Kombinationen:

  • Ein WebView2-Vorabversions-SDK zusammen mit einem Vorschaukanal von Microsoft Edge (Beta, Dev oder Canary), der die WebView2-Vorschauruntime enthält.
  • Ein WebView2 Release SDK zusammen mit der WebView2 Runtime.
WebView2-SDK-Typ Renderer-Plattform Szenario
Vorabversion des SDK Eine WebView2-Vorschauruntime, die in einem Vorschaukanal von Microsoft Edge (Beta, Dev oder Canary) enthalten ist Zum Experimentieren und Testen Ihrer App im Vergleich zu bevorstehenden Änderungen auf Ihren Entwicklungscomputern.
Release SDK Eine stabile WebView2-Runtime Für die Auslieferung Ihrer App an Endbenutzer.

WebView2-Steuerelement, Runtime und SDK

Dieses Diagramm zeigt die folgende Übersicht:

WebView2-Vorabversions-SDK:

  • .NET/C#-APIs, einschließlich experimenteller APIs.
  • WinRT/C#-APIs, einschließlich experimenteller APIs.
  • Win32/C++-APIs, einschließlich experimenteller APIs
  • WebView2Script-Paket (JavaScript-APIs).

Das Vorabversions-SDK verwendet einen Vorschaukanal von Microsoft Edge, der Folgendes umfasst:

  • Die WebView2 Preview-Runtime.
  • Das WebView2Script-Paket (JavaScript-APIs).

WebView2 Release SDK:

  • .NET/C#-APIs.
  • WinRT/C#.
  • Win32/C++.
  • WebView2Script-Paket (JavaScript-APIs).

Das Release SDK verwendet die WebView2-Runtime (WebView2 Stable Runtime).

  • Die Runtime enthält das WebView2Script-Paket (JavaScript-APIs).

In regelmäßigen Abständen laden Sie das neueste SDK von NuGet herunter. NuGet-Links finden Sie in den Versionshinweisen für das WebView2-SDK.

Das SDK enthält die JavaScript-API, die im WebView2Script Paket enthalten ist.

Siehe auch:

Verwenden eines Vorabversions-SDK und experimenteller APIs mit einem Vorschaukanal von Microsoft Edge

So entwickeln Sie die Vorabversion Ihrer App mit experimentellen APIs oder testen Ihre App im Hinblick auf anstehende SDK-Änderungen:

  • Installieren Sie auf Ihrem Dev-Computer im Visual Studio-Projekt eine Vorabversion des Microsoft.Web.WebView2 SDK-NuGet-Pakets. Schreibe Code, der die experimentellen APIs (und stabilen APIs) verwendet.
  • Installieren und verwenden Sie auf Ihrem Entwicklungscomputer einen Vorschaukanal von Microsoft Edge.

So verteilen Sie Ihre Vorabversion der App auf Ihrem Testcomputer:

  • Installieren Sie auf Ihrem Testcomputer einen Vorschaukanal von Microsoft Edge.

Siehe auch:

Verwenden eines Release SDK und stabiler APIs mit der Runtime

So entwickeln Sie die endgültige Version Ihrer App:

  • Installieren Sie auf Ihrem Entwicklungscomputer im Visual Studio-Projekt eine Releaseversion des Microsoft.Web.WebView2 SDK-NuGet-Pakets. Schreiben Sie Code, der nur die stabilen APIs verwendet.
  • Verwenden Sie auf Ihrem Entwicklungscomputer die WebView2-Runtime (Teil des SDK-Pakets).

Die WebView2-Runtime ist wie ein Browser-Modul zur Verwendung als Komponente in Ihrer App.

Es gibt mehrere Möglichkeiten, Ihre App und die Runtime an Benutzer zu verteilen. Weitere Informationen finden Sie oben unter Möglichkeiten zum Verteilen, Installieren und Aktualisieren der Runtime auf dem Computer des Benutzers .

Siehe auch:

Entwerfen der Architektur einer WebView2-App

Eine Host-App enthält die folgenden Kategorien von Komponenten:

  • Native Steuerungsinstanzen.
  • WebView2-Steuerelementinstanzen.

Eine Host-App enthält außerdem die folgenden Codekategorien:

  • Nativer Code, der native Plattform-APIs aufruft.
  • Systemeigener Code, der WebView2-APIs aufruft.
  • Webcode (JavaScript), der WebView2Script-APIs, verfügbar gemachte native APIs und Webplattform-APIs aufruft.

Entwerfen der Architektur einer WebView2-App

Möglichkeiten zum Verteilen, Installieren und Aktualisieren der Runtime auf dem Computer des Benutzers

Es gibt mehrere Möglichkeiten, die WebView2-Runtime mit Ihrer App zu verteilen:

Ansätze für die Verteilung der WebView2-Runtime

Name des Verteilungsansatzes Beschreibung Anmerkungen
Link zum Evergreen Runtime Bootstrapper Verlinken Sie im Installationsprogramm Ihrer App auf den Evergreen Runtime-Bootstrapper. Lassen Sie das Installationsprogramm Ihrer App diesen Link verwenden, um den Evergreen-Bootstrapper programmgesteuert herunterzuladen und auf dem Computer des Benutzers zu installieren. Rufen Sie dann den Bootstrapper auf, um die entsprechende Runtime für das Gerät des Benutzers zu installieren. Für Benutzer, die über eine Onlineverbindung verfügen. Der Evergreen-Bootstrapper ist ein winziger Installer, der über eine Internetverbindung die richtige Runtime für die CPU des Benutzers installiert.
Verpacken des Evergreen Runtime-Bootstrappers Laden Sie den Evergreen-Bootstrapper auf Ihren Entwicklungscomputer herunter. Verpacken und verteilen Sie den Evergreen-Bootstrapper mit Ihrem App-Installer. Anschließend ruft Ihr App-Installer den Bootstrapper auf, um die Runtime auf dem Computer des Benutzers zu installieren. Für Benutzer, die keine zuverlässige Verbindung mit der Bootstrapper-CDN-Site haben.
Verpacken des eigenständigen Evergreen Runtime-Installationsprogramms Laden Sie das eigenständige Evergreen-Installationsprogramm auf Ihren Entwicklungscomputer herunter, und verpacken Sie es mit Ihrer App. Verpacken Sie den eigenständigen Evergreen-Installer mit dem Installer Ihrer App. Das Installationsprogramm Ihrer App ruft dann das eigenständige Evergreen-Installationsprogramm auf, um die Runtime auf dem Gerät des Benutzers zu installieren. Für Offlinebenutzer. Ein großer, eigenständiger Evergreen Runtime-Installer für Offlinebenutzer, der die Evergreen Runtime enthält.
Verpacken einer Runtime mit Fixierter Version Laden Sie eine versions- und CPU-spezifische Runtime auf Ihren Entwicklungscomputer herunter. Verpacken und verteilen Sie die Runtime mit Fixierter Version zusammen mit dem Installer Ihrer App. Das Installationsprogramm Ihrer App installiert die spezifische Runtime mit Fixierter Version auf dem Computer des Benutzers. Spezialfall, wenn Sie eine bestimmte Version der APIs benötigen; vermeidet das Testen, ob die neuesten APIs verfügbar sind.

Die oben genannten Ansätze sind in der gleichen Reihenfolge wie im Abschnitt "WebView2-Runtime herunterladen " der Microsoft Edge WebView2-Seite aufgeführt, von einfachen bis zu schwergewichtigen Ansätzen. Bevorzugen Sie die leichten Ansätze; Verwenden Sie einen schwergewichtigen Ansatz, wenn dies für ein spezielles Szenario erforderlich ist.

Das Installationsprogramm Ihrer App ist das Installationsprogramm/der Updater Ihrer App, das von Ihrer App getrennt oder ein Teil Ihrer App sein kann.

Siehe auch:

Kommunikation mit einem HTTP-Server

Das WebView2-Steuerelement fungiert als Vermittler für die Kommunikation zwischen der Host-App und dem HTTP-Server.

Host-App, WebView2-Steuerelement und HTTP-Server

Siehe auch

developer.microsoft.com:

Ressourcen für die Entwicklung von WebView2-Apps:

  • Zuletzt aktualisiert um