Cuando desarrollas contenido web para WebView, puede ser útil entregar contenido desde un servidor web local en tu máquina de desarrollo. Si accedes a este servidor local desde un WebView en un dispositivo o emulador de prueba, puedes ver rápidamente los cambios sin implementar en un servidor remoto. En esta página, se explican varias formas de acceder a un servidor web que se ejecuta en tu máquina host desde un WebView.
Cómo configurar la redirección de puertos inversa con ADB
Puedes usar Android Debug Bridge (adb), una herramienta de línea de comandos para comunicarte con tu dispositivo, para configurar la redirección de puertos inversa. Esta función permite que tu dispositivo o emulador acceda a un servidor web que se ejecuta en localhost en tu máquina de desarrollo.
adb tiene un comando reverse que puede reenviar solicitudes en un puerto específico del dispositivo a un puerto diferente en la máquina host.
Para usar esta función, ejecuta el siguiente comando en la terminal:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Reemplaza lo siguiente:
DEVICE_PORT: Es el puerto del dispositivo al que se conecta el WebView de tu app. Por ejemplo, 8080.HOST_PORT: Es el puerto de tu máquina de desarrollo en el que se ejecuta tu servidor web. Por ejemplo, 8080 o 3000.
Ejemplo:
Si tu servidor de desarrollo local se ejecuta en localhost:8080 en tu máquina de desarrollo, puedes reenviar solicitudes desde tu dispositivo ejecutando el siguiente comando:
adb reverse tcp:8080 tcp:8080
Después de ejecutar este comando, puedes dirigir la WebView de tu app a http://localhost:8080 en el dispositivo o emulador. Luego, WebView puede conectarse al servidor web que se ejecuta en localhost:8080 en tu máquina de desarrollo. Este método funciona tanto con dispositivos físicos conectados a través de USB como con el emulador de Android.
Usa el reenvío de puertos de las Herramientas para desarrolladores de Chrome
Las Herramientas para desarrolladores de Chrome tienen su propia función de reenvío de puertos que puedes usar para reenviar solicitudes desde tu dispositivo a tu máquina de desarrollo.
- Configura tu dispositivo para la depuración como se describe en Cómo depurar con las Herramientas para desarrolladores de Chrome.
- En la página
chrome://inspect, selecciona Reenvío de puertos…. - En el campo Puerto, ingresa el número de puerto del dispositivo Android que deseas usar para acceder a tu máquina de desarrollo.
- En el campo Dirección IP y puerto, ingresa la dirección y el número de puerto del servidor web de tu máquina de desarrollo.
- Selecciona la casilla de verificación Enable port forwarding.
- Selecciona Listo.
Por ejemplo, si ingresas 3000 en el campo Puerto y localhost:8000 en el campo Dirección IP y puerto, cuando dirijas tu WebView a http://localhost:3000, podrá acceder al servidor web de tu máquina de desarrollo que escucha en localhost:8000.
También puedes usar un nombre de dominio personalizado para tu servidor web local. Para obtener instrucciones sobre cómo hacerlo, consulta Cómo acceder a servidores locales y a instancias de Chrome con reenvío de puertos.
Conéctate con la dirección IP de transferencia de Android Emulator
El emulador de Android proporciona la dirección IP de transferencia especial 10.0.2.2 para conectar tu app a tu máquina de desarrollo. No se recomienda este método para la depuración de WebView porque tu WebView no tratará esta dirección IP como un contexto seguro. Como resultado, muchas funciones de la plataforma web (como Service Workers, la ubicación geográfica y el acceso a la cámara y el micrófono) no estarán disponibles para tu app web. Los métodos de reenvío de puertos de adb reverse y Chrome DevTools que se describieron anteriormente no tienen este problema porque te permiten dirigir tu WebView al nombre de host de confianza localhost.