為 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 DevTools 進行偵錯」一文的說明,設定裝置以進行偵錯。
- 在
chrome://inspect頁面中,選取「通訊埠轉送...」。 - 在「Port」(通訊埠) 欄位中,輸入要用來存取開發機器的 Android 裝置通訊埠編號。
- 在「IP address and port」(IP 位址和通訊埠) 欄位中,輸入開發機器的網頁伺服器位址和通訊埠號碼。
- 勾選「啟用通訊埠轉送」核取方塊。
- 選取「完成」。
舉例來說,如果您在「通訊埠」欄位中輸入 3000,並在「IP 位址和通訊埠」欄位中輸入 localhost:8000,當您將 WebView 指向 http://localhost:3000 時,即可存取開發電腦上監聽 localhost:8000 的網頁伺服器。
您也可以為本機網路伺服器使用自訂網域名稱。如需相關操作說明,請參閱「使用連接埠轉送功能存取本機伺服器和 Chrome 執行個體」。
使用 Android Emulator 的直通 IP 位址連線
Android Emulator 提供特殊的傳遞 IP 位址 10.0.2.2,可讓您從應用程式連線至開發機器。我們不建議使用這種方法進行 WebView 偵錯,因為 WebView 不會將這個 IP 位址視為安全環境。因此,您的網頁應用程式無法使用許多網頁平台功能 (例如 Service Worker、地理位置,以及相機和麥克風存取權)。先前說明的 adb reverse 和 Chrome 開發人員工具連接埠轉送方法不會有這個問題,因為這些方法可讓您將 WebView 指向信任的主機名稱 localhost。