Saat mengembangkan konten web untuk WebView, sebaiknya sajikan konten dari server web lokal di komputer pengembangan Anda. Jika mengakses server lokal ini dari WebView di perangkat atau emulator pengujian, Anda dapat dengan cepat melihat perubahan tanpa men-deploy ke server jarak jauh. Halaman ini menjelaskan beberapa cara untuk mengakses server web yang berjalan di mesin host dari WebView.
Menyiapkan penerusan port terbalik dengan ADB
Anda dapat menggunakan Android Debug Bridge (adb), alat command line untuk
berkomunikasi dengan perangkat Anda, guna menyiapkan penerusan port terbalik. Fitur ini memungkinkan perangkat atau emulator Anda mengakses server web yang berjalan di localhost di mesin pengembangan Anda.
adb memiliki perintah reverse yang dapat meneruskan permintaan pada port tertentu di perangkat ke port lain di mesin host.
Untuk menggunakan fitur ini, jalankan perintah berikut di terminal Anda:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Ganti kode berikut:
DEVICE_PORT: Port di perangkat yang terhubung ke WebView aplikasi Anda. Misalnya, 8080.HOST_PORT: Port di mesin pengembangan tempat server web Anda berjalan. Misalnya, 8080 atau 3000.
Contoh:
Jika server pengembangan lokal Anda berjalan di localhost:8080 di mesin pengembangan, Anda dapat meneruskan permintaan dari perangkat ke server tersebut dengan menjalankan perintah berikut:
adb reverse tcp:8080 tcp:8080
Setelah menjalankan perintah ini, Anda dapat mengarahkan WebView aplikasi ke
http://localhost:8080 di perangkat atau emulator. WebView kemudian dapat terhubung
ke server web yang berjalan di localhost:8080 pada mesin pengembangan Anda. Metode ini berfungsi dengan perangkat fisik yang terhubung menggunakan USB dan Android Emulator.
Menggunakan penerusan port Chrome DevTools
Chrome DevTools memiliki fitur penerusan port sendiri yang dapat Anda gunakan untuk meneruskan permintaan dari perangkat ke komputer pengembangan.
- Siapkan perangkat Anda untuk proses debug seperti yang dijelaskan dalam Melakukan debug menggunakan Chrome DevTools.
- Di halaman
chrome://inspect, pilih Penerusan port.... - Di kolom Port, masukkan nomor port di perangkat Android yang ingin Anda gunakan untuk mengakses mesin pengembangan.
- Di kolom Alamat IP dan port, masukkan alamat server web dan nomor port mesin pengembangan Anda.
- Centang kotak Aktifkan penerusan port.
- Pilih Selesai.
Misalnya, jika Anda memasukkan 3000 di kolom Port dan localhost:8000 di kolom Alamat IP dan port, maka saat Anda mengarahkan WebView ke http://localhost:3000, WebView dapat mengakses server web komputer pengembangan yang memproses localhost:8000.
Anda juga dapat menggunakan nama domain kustom untuk server web lokal Anda. Untuk petunjuk tentang cara melakukannya, lihat Mengakses server lokal dan instance Chrome dengan penerusan port.
Menghubungkan menggunakan alamat IP pass-through Android Emulator
Emulator Android menyediakan alamat IP teruskan khusus 10.0.2.2 untuk terhubung ke mesin pengembangan dari aplikasi Anda. Metode ini tidak direkomendasikan untuk proses debug WebView karena WebView Anda tidak akan memperlakukan alamat IP ini sebagai konteks aman. Akibatnya, banyak fitur platform web (seperti Service Worker, Geolocation, dan akses kamera serta mikrofon) tidak akan tersedia untuk aplikasi web Anda. Metode penerusan port adb reverse dan Chrome DevTools yang dijelaskan sebelumnya tidak memiliki masalah ini karena memungkinkan Anda mengarahkan WebView ke nama host tepercaya localhost.