從 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 開發人員工具內建通訊埠轉送功能,可將裝置的請求轉送至開發機器。

  1. 請按照「使用 Chrome DevTools 進行偵錯」一文的說明,設定裝置以進行偵錯。
  2. chrome://inspect 頁面中,選取「通訊埠轉送...」
  3. 在「Port」(通訊埠) 欄位中,輸入要用來存取開發機器的 Android 裝置通訊埠編號。
  4. 在「IP address and port」(IP 位址和通訊埠) 欄位中,輸入開發機器的網頁伺服器位址和通訊埠號碼。
  5. 勾選「啟用通訊埠轉送」核取方塊。
  6. 選取「完成」

舉例來說,如果您在「通訊埠」欄位中輸入 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