При разработке веб-контента для WebView может быть полезно размещать контент на локальном веб-сервере на компьютере для разработки. Если вы получаете доступ к этому локальному серверу из WebView на тестовом устройстве или эмуляторе, вы можете быстро увидеть свои изменения без развертывания на удаленном сервере. В этой статье рассказывается, как получить доступ к веб-серверу, работающему на хост-машине, из WebView.
Как настроить обратную переадресацию портов с помощью ADB
Чтобы настроить обратную переадресацию портов, можно использовать Android Debug Bridge (adb) – инструмент командной строки для связи с устройством. Эта функция позволяет устройству или эмулятору получить доступ к веб-серверу, работающему на порте localhost на компьютере для разработки.
В adb есть команда reverse, которая может перенаправлять запросы с определенного порта на устройстве на другой порт на хост-компьютере.
Чтобы использовать эту функцию, выполните в терминале следующую команду:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Замените следующее:
DEVICE_PORT– порт на устройстве, к которому подключается компонент WebView вашего приложения. например 8080.HOST_PORT– порт на компьютере для разработки, на котором запущен веб-сервер. например 8080 или 3000.
Пример
Если локальный сервер разработки запущен на компьютере для разработки по адресу localhost:8080, вы можете перенаправлять на него запросы с устройства, выполнив следующую команду:
adb reverse tcp:8080 tcp:8080
После выполнения этой команды вы можете направить компонент WebView вашего приложения на http://localhost:8080 на устройстве или в эмуляторе. После этого компонент WebView сможет подключиться к веб-серверу, работающему на порту localhost:8080 на вашем компьютере для разработки. Этот метод работает как с физическими устройствами, подключенными через USB, так и с эмулятором Android.
Как использовать переадресацию портов в инструментах разработчика Chrome
В инструментах разработчика Chrome есть функция переадресации портов, которая позволяет перенаправлять запросы с устройства на компьютер для разработки.
- Настройте устройство для отладки, как описано в статье Отладка с помощью инструментов разработчика в Chrome.
- На странице
chrome://inspectвыберите Переадресация портов. - В поле Порт введите номер порта на устройстве Android, который вы хотите использовать для доступа к компьютеру для разработки.
- В поле IP-адрес и порт введите адрес веб-сервера и номер порта компьютера для разработки.
- Установите флажок Включить переадресацию портов.
- Нажмите Готово.
Например, если вы введете 3000 в поле Порт и localhost:8000 в поле IP-адрес и порт, то при указании http://localhost:3000 в WebView будет доступен веб-сервер компьютера для разработки, прослушивающий порт localhost:8000.
Вы также можете использовать собственное доменное имя для локального веб-сервера. Инструкции приведены в статье Как получить доступ к локальным серверам и экземплярам Chrome с помощью переадресации портов.
Как подключиться с помощью сквозного IP-адреса эмулятора Android
Эмулятор Android предоставляет специальный сквозной IP-адрес 10.0.2.2 для подключения к компьютеру для разработки из приложения. Этот метод не рекомендуется для отладки WebView, поскольку WebView не будет рассматривать этот IP-адрес как безопасный контекст. В результате многие функции веб-платформы (например, Service Worker, геолокация, доступ к камере и микрофону) будут недоступны для вашего веб-приложения. При использовании описанных выше методов переадресации портов с помощью adb reverse и инструментов разработчика Chrome такой проблемы не возникает, поскольку они позволяют указать для WebView доверенное имя хоста localhost.