Получите доступ к локальному серверу разработки из WebView.

При разработке веб-контента для 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 DevTools есть собственная функция переадресации портов, которую можно использовать для перенаправления запросов с вашего устройства на вашу рабочую машину.

  1. Настройте устройство для отладки, как описано в разделе «Отладка с помощью инструментов разработчика Chrome» .
  2. На странице chrome://inspect выберите «Переадресация портов...» .
  3. В поле «Порт» введите номер порта на устройстве Android, который вы хотите использовать для доступа к вашей машине для разработки.
  4. В поле «IP-адрес и порт» введите адрес веб-сервера и номер порта вашей машины для разработки.
  5. Установите флажок «Включить переадресацию портов» .
  6. Выберите «Готово» .

Например, если вы введете 3000 в поле «Порт» и localhost:8000 в полях «IP-адрес» и «Порт» , то при обращении к http://localhost:3000 ваш WebView сможет получить доступ к веб-серверу вашей машины разработки, работающему на localhost:8000 .

Вы также можете использовать собственное доменное имя для своего локального веб-сервера. Инструкции по этому поводу см. в разделе «Доступ к локальным серверам и экземплярам Chrome с помощью переадресации портов» .

Подключитесь, используя сквозной IP-адрес эмулятора Android.

Эмулятор Android предоставляет специальный сквозной IP-адрес 10.0.2.2 для подключения к вашей машине разработки из вашего приложения. Этот метод не рекомендуется для отладки WebView, поскольку ваш WebView не будет рассматривать этот IP-адрес как безопасный контекст . В результате многие функции веб-платформы (такие как Service Workers, геолокация, доступ к камере и микрофону) будут недоступны для вашего веб-приложения. Методы adb reverse и переадресации портов в инструментах разработчика Chrome, описанные ранее, не имеют этой проблемы, поскольку они позволяют вам направить ваш WebView на доверенное имя хоста localhost .