Ao desenvolver conteúdo da Web para WebView, pode ser útil veicular conteúdo de um servidor da Web local na sua máquina de desenvolvimento. Se você acessar esse servidor local de uma WebView em um dispositivo de teste ou emulador, poderá conferir rapidamente as mudanças sem implantar em um servidor remoto. Nesta página, explicamos várias maneiras de acessar um servidor da Web em execução na máquina host de uma WebView.
Configurar o encaminhamento de portas reverso com o ADB
É possível usar o Android Debug Bridge (adb), uma ferramenta de linha de comando para
comunicação com seu dispositivo, para configurar o encaminhamento de porta inverso. Com esse recurso, seu dispositivo ou emulador pode acessar um servidor da Web executado em localhost na sua máquina de desenvolvimento.
O adb tem um comando reverse que pode encaminhar solicitações em uma porta específica do
dispositivo para uma porta diferente na máquina host.
Para usar esse recurso, execute o seguinte comando no terminal:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Substitua:
DEVICE_PORT: a porta no dispositivo a que a WebView do seu app se conecta. Por exemplo, 8080.HOST_PORT: a porta na sua máquina de desenvolvimento em que o servidor da Web está em execução. Por exemplo, 8080 ou 3000.
Exemplo:
Se o servidor de desenvolvimento local estiver sendo executado em localhost:8080 na máquina de desenvolvimento, encaminhe as solicitações do dispositivo para ele executando o seguinte comando:
adb reverse tcp:8080 tcp:8080
Depois de executar esse comando, aponte a WebView do app para
http://localhost:8080 no dispositivo ou emulador. A WebView pode se conectar
ao servidor da Web em execução em localhost:8080 na sua máquina de desenvolvimento. Esse
método funciona com dispositivos físicos conectados via USB e com o emulador
do Android.
Usar o encaminhamento de porta do Chrome DevTools
O Chrome DevTools tem um recurso próprio de encaminhamento de porta que pode ser usado para encaminhar solicitações do seu dispositivo para a máquina de desenvolvimento.
- Configure seu dispositivo para depuração, conforme descrito em Depurar usando o Chrome DevTools.
- Na página
chrome://inspect, selecione Encaminhamento de portas.... - No campo Porta, insira o número da porta no dispositivo Android que você quer usar para acessar sua máquina de desenvolvimento.
- No campo Endereço IP e porta, insira o endereço do servidor da Web e o número da porta da sua máquina de desenvolvimento.
- Marque a caixa de seleção Ativar encaminhamento de portas.
- Selecione Concluído.
Por exemplo, se você inserir 3000 no campo Porta e localhost:8000 no campo Endereço IP e porta, quando você apontar sua WebView para http://localhost:3000, ela poderá acessar o servidor da Web da sua máquina de desenvolvimento que está escutando em localhost:8000.
Também é possível usar um nome de domínio personalizado para seu servidor da Web local. Para instruções sobre como fazer isso, consulte Acessar servidores locais e instâncias do Chrome com encaminhamento de porta.
Conectar usando o endereço IP de passagem do Android Emulator
O emulador do Android fornece o endereço IP de passagem especial 10.0.2.2 para
conectar-se à sua máquina de desenvolvimento pelo app. Esse método não é recomendado
para depuração do WebView porque ele não trata esse endereço IP como um
contexto seguro. Como resultado, muitos recursos da plataforma Web (como Service Workers, geolocalização e acesso à câmera e ao microfone) não estarão disponíveis para seu app da Web. Os métodos de encaminhamento de porta adb reverse e Chrome DevTools descritos anteriormente não têm esse problema porque permitem apontar sua WebView para o nome do host confiável localhost.