Componentes da plataforma WebView2

Para adicionar o WebView2 ao seu aplicativo, use o SDK do WebView2 em sua máquina de desenvolvimento e distribua o WebView2 Runtime para as máquinas dos usuários.

Conteúdo detalhado:

Componentes no computador de desenvolvimento e nos computadores do usuário

Para adicionar o WebView2 ao seu aplicativo, use o SDK do WebView2 em sua máquina de desenvolvimento e distribua o WebView2 Runtime para as máquinas dos usuários.

Componentes WebView2 de nível superior

Termo abreviado Descrição
Aplicativo Qualquer aplicativo, para qualquer estrutura ou plataforma, que inclua uma instância do controle WebView2. Um aplicativo pode ter áreas que usam uma instância de controle WebView2 e outras áreas que não usam o controle.
SDK O SDK do WebView2. Quando uma parte do seu aplicativo usa o WebView2, esse código pode chamar essas APIs em conjunto com instâncias do controle WebView2. O SDK de lançamento é fornecido aos usuários e contém somente APIs estáveis. O SDK de pré-lançamento é usado apenas por desenvolvedores e contém algumas APIs experimentais.
Control Uma instância do controle WebView2. Em um aplicativo, normalmente aparece como uma área retangular que contém conteúdo da Web.
Tempo de execução O WebView2 Runtime, que é um mecanismo de navegador. Instalado nas máquinas do usuário, bem como nas máquinas de desenvolvimento e teste.
Canal de visualização Um canal de visualização do Microsoft Edge, Beta (quase estável), Dev ou Canary (a compilação mais recente; diariamente). Somente para máquinas de desenvolvimento e teste, não para máquinas de usuário.

O controle WebView2, o SDK e o Runtime

O controle WebView2, o SDK do WebView2 e o WebView2 Runtime têm as seguintes funções:

Componente Função
WebView2 SDK Fornece APIs para os desenvolvedores usarem no código de um aplicativo. Usado pelo Dev localmente durante a codificação do aplicativo. Duas versões: SDK de pré-lançamento para testes de desenvolvimento local e SDK de lançamento para desenvolver código lançável para usuários.
Controle WebView2 Você incorpora o controle WebView2 no aplicativo. hospeda o tempo de execução; serve como uma área visível para exibir conteúdo da web.
WebView2 Runtime No computador de teste do Dev e nos computadores do usuário. Ou, em vez de usar o Runtime, o Dev pode usar um canal de visualização do Microsoft Edge para testes locais, ao usar o SDK de Pré-lançamento.

Diagrama de componentes WebView2 de alto nível

O diagrama a seguir mostra os componentes WebView2 de alto nível em seu computador de desenvolvimento e computadores de usuário:

Aplicativo no computador de desenvolvimento e no computador do usuário

Computador de desenvolvimento

Esta seção explica a coluna esquerda do diagrama acima.

Seu computador de desenvolvimento, para desenvolver um aplicativo WebView2, consiste nos seguintes componentes:

  • Projeto do Visual Studio – use um modelo de projeto do Visual Studio para criar um aplicativo de plataforma padrão e, em seguida, adicione o SDK do WebView2 ao projeto como um pacote NuGet.

    • Designer de layout – disponha seus controles no Visual Studio.

      • Instâncias de controle WebView2 - Áreas de conteúdo da Web do seu aplicativo. O código do lado da Web do aplicativo é executado nesse controle.

      • Instâncias de controle nativo – controles nativos e painéis do seu aplicativo.

    • O SDK do WebView2.

      • APIs WebView2 por plataforma, incluindo CoreWebView2, CoreWebView2Controllere CoreWebView2Environment. Chamado principalmente pelo código do lado nativo.

      • AddHostObjectToScript - Habilita a exposição de APIs de plataforma e APIs WebView2 ao código JavaScript. Consulte Interoperabilidade de código nativo e da Web

      • APIs JavaScript (pacote WebView2Script) - Chamadas por código do lado da Web para se comunicar com o aplicativo host.

    • APIs de plataforma - APIs não WebView2 fornecidas pela plataforma web; usado pelo código do lado da Web.

  • WebView2 Runtime - Componente do navegador Microsoft Edge que contém APIs WebView2 e executa seu código do lado da Web.

Computador do usuário

Esta seção explica a coluna da direita do diagrama acima.

Na máquina do usuário final estão os seguintes componentes envolvidos na execução de um aplicativo WebView2:

  • O aplicativo host, que o usuário instalou e está usando.

    • Código nativo do WebView2: seu código nativo que usa APIs do WebView2.

    • Código da Web: seu código do lado da Web que é executado em uma instância de controle WebView2.

    • Instâncias de controle WebView2: o código do lado da Web do aplicativo WebView2 é executado em um controle WebView2.

    • Código nativo não WebView2.

    • Código da Web não WebView2.

    • Instâncias de controle nativo.

  • O tempo de execução do WebView2.

SDK de pré-lançamento com Preview Runtime ou SDK de lançamento com Stable Runtime

Você usa uma das combinações:

  • Um SDK de pré-lançamento do WebView2 junto com um canal de visualização do Microsoft Edge (Beta, Dev ou Canary), que inclui o WebView2 Preview Runtime.
  • Um SDK de lançamento do WebView2 junto com o WebView2 Runtime.
Tipo de SDK do WebView2 Plataforma de renderizador Cenário
SDK de pré-lançamento Um WebView2 Preview Runtime, que está incluído em um canal de visualização do Microsoft Edge (Beta, Dev ou Canary) Para experimentar e testar seu aplicativo em relação às próximas alterações, em seus computadores de desenvolvimento.
SDK de lançamento Um WebView2 Stable Runtime Para enviar seu aplicativo aos usuários finais.

Controle WebView2, Runtime e SDK

Este diagrama mostra a seguinte estrutura de tópicos:

SDK de pré-lançamento do WebView2:

  • APIs do .NET/C#, incluindo APIs experimentais.
  • APIs WinRT/C#, incluindo APIs experimentais.
  • APIs Win32/C++, incluindo APIs experimentais.
  • Pacote WebView2Script (APIs JavaScript).

O SDK de Pré-lançamento usa um canal de visualização do Microsoft Edge, que inclui:

  • O tempo de execução de visualização do WebView2.
  • O pacote WebView2Script (APIs JavaScript).

SDK da versão do WebView2:

  • APIs do .NET/C#.
  • WinRT/C#.
  • Win32/C++.
  • Pacote WebView2Script (APIs JavaScript).

O SDK de lançamento usa o WebView2 Runtime (WebView2 Stable Runtime).

  • O Runtime inclui o pacote WebView2Script (APIs JavaScript).

Você baixa periodicamente o SDK mais recente do NuGet. Os links do NuGet estão nas Notas de Versão do SDK do WebView2.

O SDK inclui a API JavaScript, que está no WebView2Script pacote.

Veja também:

Usar um SDK de pré-lançamento e APIs experimentais com um canal de visualização do Microsoft Edge

Para desenvolver a versão de pré-lançamento do seu aplicativo usando APIs experimentais ou para testar seu aplicativo em relação às próximas alterações do SDK:

  • Em seu computador de desenvolvimento, no projeto Visual Studio, instale uma versão de pré-lançamento do Microsoft.Web.WebView2 pacote NuGet do SDK. Escreva o código que usa as APIs experimentais (e APIs estáveis).
  • Em seu computador de desenvolvimento, instale e use um canal de visualização do Microsoft Edge.

Para distribuir seu aplicativo de pré-lançamento para seu computador de teste:

  • Em seu computador de teste, instale um canal de visualização do Microsoft Edge.

Veja também:

Usando um SDK de lançamento e APIs estáveis com o Runtime

Para desenvolver a versão de lançamento do seu aplicativo:

  • Em seu computador de desenvolvimento, no projeto Visual Studio, instale uma versão de lançamento do Microsoft.Web.WebView2 pacote NuGet do SDK. Escreva um código que use apenas as APIs estáveis .
  • Em seu computador de desenvolvimento, use o WebView2 Runtime (parte do pacote do SDK).

O WebView2 Runtime é como um mecanismo de navegador para uso como um componente em seu aplicativo.

Há várias maneiras de distribuir seu aplicativo e o Runtime para os usuários. Consulte Maneiras de distribuir, instalar e atualizar o Runtime no computador do usuário acima.

Veja também:

Arquitetura de design de um aplicativo WebView2

Um aplicativo host contém as seguintes categorias de componentes:

  • Instâncias de controle nativo.
  • instâncias de controle WebView2.

Um aplicativo host também contém as seguintes categorias de código:

  • Código nativo, que chama APIs da plataforma nativa.
  • Código nativo, que chama APIs WebView2.
  • Código da Web (JavaScript), que chama APIs WebView2Script, APIs nativas expostas e APIs de plataforma Web.

Arquitetura de design de um aplicativo WebView2

Maneiras de distribuir, instalar e atualizar o Runtime no computador do usuário

Existem várias maneiras de distribuir o WebView2 Runtime com seu aplicativo:

Abordagens para distribuir o WebView2 Runtime

Nome da abordagem de distribuição Descrição Observações
Link para o bootstrapper Evergreen Runtime No instalador do seu aplicativo, vincule-se ao bootstrapper Evergreen Runtime. Faça com que o instalador do seu aplicativo use este link para baixar e instalar programaticamente o bootstrapper Evergreen no computador do usuário. Em seguida, invoque o bootstrapper para instalar o Runtime apropriado para o dispositivo do usuário. Para usuários que têm uma conexão online. O bootstrapper Evergreen é um pequeno instalador que instala o Runtime correto para a CPU do usuário, usando uma conexão com a Internet.
Empacotar o bootstrapper Evergreen Runtime Baixe o bootstrapper Evergreen para seu computador de desenvolvimento. Empacote e distribua o bootstrapper Evergreen com o instalador do aplicativo. Em seguida, o instalador do aplicativo invoca o bootstrapper para instalar o Runtime no computador do usuário. Para usuários que não têm uma conexão confiável com o site da CDN de bootstrapper.
Empacotar o instalador autônomo do Evergreen Runtime Baixe o instalador autônomo Evergreen para seu computador Dev e empacote-o com seu aplicativo. Empacote o instalador autônomo Evergreen com o instalador do seu aplicativo. Em seguida, o instalador do seu aplicativo invoca o instalador autônomo Evergreen para instalar o Runtime no dispositivo do usuário. Para usuários offline. Um instalador grande e autônomo do Evergreen Runtime para usuários offline, que inclui o Evergreen Runtime.
Empacotar um Runtime de versão fixa Baixe um Runtime específico da versão e da CPU para seu computador de desenvolvimento. Empacote e distribua o Runtime de versão fixa com o instalador do seu aplicativo. O instalador do aplicativo instala o Runtime de versão fixa específico no computador do usuário. Caso especial, para quando você precisar de versão específica das APIs; evita testar se as APIs mais recentes estão disponíveis.

As abordagens acima estão listadas na mesma sequência que na seção Baixar o WebView2 Runtime da página Microsoft Edge WebView2 , de abordagens leves a pesadas. Favoreça as abordagens leves; Use uma abordagem de peso pesado, se exigido por um cenário especializado.

O instalador do seu aplicativo significa o instalador/atualizador do seu aplicativo, que pode ser separado do seu aplicativo ou uma parte do seu aplicativo.

Veja também:

Comunicação com um servidor HTTP

O controle WebView2 atua como um intermediário para a comunicação entre o aplicativo host e o servidor HTTP.

Aplicativo host, controle WebView2 e servidor HTTP

Confira também

developer.microsoft.com:

Recursos para desenvolvimento de aplicativos WebView2:

  • Last updated on