Podczas tworzenia treści internetowych dla WebView warto wyświetlać je z lokalnego serwera WWW na komputerze deweloperskim. Jeśli uzyskasz dostęp do tego serwera lokalnego z poziomu elementu WebView na urządzeniu testowym lub emulatorze, możesz szybko zobaczyć zmiany bez wdrażania ich na serwerze zdalnym. Z tego artykułu dowiesz się, jak uzyskać dostęp do serwera internetowego działającego na komputerze hosta z poziomu WebView.
Konfigurowanie odwrotnego przekierowania portów za pomocą ADB
Aby skonfigurować odwrotne przekierowanie portów, możesz użyć Android Debug Bridge (adb), czyli narzędzia wiersza poleceń do komunikacji z urządzeniem. Ta funkcja umożliwia urządzeniu lub emulatorowi dostęp do serwera WWW działającego na localhost na komputerze deweloperskim.
adb ma polecenie reverse, które może przekazywać żądania na określonym porcie na urządzeniu do innego portu na komputerze hosta.
Aby użyć tej funkcji, uruchom w terminalu to polecenie:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Zastąp te elementy:
DEVICE_PORT: port na urządzeniu, z którym łączy się WebView aplikacji. Na przykład 8080.HOST_PORT: port na komputerze deweloperskim, na którym działa serwer internetowy. Na przykład 8080 lub 3000.
Przykład:
Jeśli lokalny serwer deweloperski działa na porcie localhost:8080 na komputerze deweloperskim, możesz przekierowywać do niego żądania z urządzenia, uruchamiając to polecenie:
adb reverse tcp:8080 tcp:8080
Po uruchomieniu tego polecenia możesz skierować element WebView aplikacji na adres http://localhost:8080 na urządzeniu lub w emulatorze. WebView może się wtedy połączyć z serwerem WWW działającym na localhost:8080 na Twoim komputerze deweloperskim. Ta metoda działa zarówno w przypadku urządzeń fizycznych połączonych przez USB, jak i emulatora Androida.
Korzystanie z przekierowania portów w Narzędziach deweloperskich w Chrome
Narzędzia deweloperskie w Chrome mają własną funkcję przekazywania portów, której możesz używać do przekazywania żądań z urządzenia na komputer deweloperski.
- Skonfiguruj urządzenie do debugowania zgodnie z opisem w artykule Debugowanie za pomocą narzędzi Chrome DevTools.
- Na stronie
chrome://inspectwybierz Przekierowanie portów.... - W polu Port wpisz numer portu na urządzeniu z Androidem, którego chcesz używać do uzyskiwania dostępu do maszyny deweloperskiej.
- W polu Adres IP i port wpisz adres serwera internetowego i numer portu komputera deweloperskiego.
- Zaznacz pole wyboru Włącz przekazywanie portów.
- Kliknij Gotowe.
Jeśli na przykład w polu Port wpiszesz 3000, a w polu Adres IP i port wpiszesz localhost:8000, to gdy skierujesz WebView na http://localhost:3000, będzie ona mieć dostęp do serwera internetowego na Twoim komputerze deweloperskim, który nasłuchuje na localhost:8000.
Możesz też użyć niestandardowej nazwy domeny dla lokalnego serwera WWW. Instrukcje znajdziesz w artykule Uzyskiwanie dostępu do serwerów lokalnych i instancji Chrome za pomocą przekierowania portów.
Łączenie z użyciem przekazywanego adresu IP emulatora Androida
Emulator Androida udostępnia specjalny adres IP 10.0.2.2, który umożliwia łączenie się z maszyną deweloperską z poziomu aplikacji. Ta metoda nie jest zalecana do debugowania WebView, ponieważ WebView nie traktuje tego adresu IP jako bezpiecznego kontekstu. W rezultacie wiele funkcji platformy internetowej (takich jak Service Workers, geolokalizacja oraz dostęp do kamery i mikrofonu) nie będzie dostępnych w Twojej aplikacji internetowej. Opisane wcześniej metody przekierowania portów adb reverse i Narzędzi deweloperskich w Chrome nie mają tego problemu, ponieważ umożliwiają skierowanie elementu WebView na zaufaną nazwę hosta localhost.