在为 WebView 开发 Web 内容时,从开发机器上的本地 Web 服务器提供内容会很有帮助。如果您从测试设备或模拟器上的 WebView 访问此本地服务器,则无需部署到远程服务器即可快速查看所做的更改。本页面介绍了从 WebView 访问主机上运行的 Web 服务器的几种方法。
使用 ADB 设置反向端口转发
您可以使用 Android 调试桥 (adb)(一种用于与设备通信的命令行工具)来设置反向端口转发。借助此功能,您的设备或模拟器可以访问开发机器上 localhost 中运行的网络服务器。
adb 具有 reverse 命令,可将设备上特定端口的请求转发到主机上的其他端口。
如需使用此功能,请在终端中运行以下命令:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
替换以下内容:
DEVICE_PORT:应用的 WebView 连接到的设备上的端口。例如,8080。HOST_PORT:开发机器上运行 Web 服务器的端口。例如,8080 或 3000。
示例:
如果本地开发服务器在开发机器上通过 localhost:8080 运行,您可以通过运行以下命令将设备上的请求转发到该服务器:
adb reverse tcp:8080 tcp:8080
运行此命令后,您可以将应用的 WebView 指向设备或模拟器上的 http://localhost:8080。然后,WebView 可以连接到开发机器上 localhost:8080 中运行的 Web 服务器。此方法适用于通过 USB 连接的实体设备和 Android 模拟器。
使用 Chrome 开发者工具端口转发
Chrome 开发者工具具有自己的端口转发功能,您可以使用该功能将来自设备的请求转发到开发机器。
- 按照使用 Chrome DevTools 进行调试中的说明设置设备以进行调试。
- 在
chrome://inspect页面上,选择端口转发...。 - 在端口字段中,输入您要用于访问开发机器的 Android 设备上的端口号。
- 在 IP 地址和端口字段中,输入开发机器的网络服务器地址和端口号。
- 选中启用端口转发复选框。
- 选择完成。
例如,如果您在端口字段中输入 3000,并在 IP 地址和端口字段中输入 localhost:8000,那么当您将 WebView 指向 http://localhost:3000 时,它就可以访问开发机器上监听 localhost:8000 的 Web 服务器。
您还可以为本地 Web 服务器使用自定义域名。如需了解如何执行此操作,请参阅通过端口转发访问本地服务器和 Chrome 实例。
使用 Android 模拟器的直通 IP 地址进行连接
Android 模拟器提供特殊的直通 IP 地址 10.0.2.2,以便从应用连接到开发机器。不建议将此方法用于 WebView 调试,因为 WebView 不会将此 IP 地址视为安全上下文。因此,许多 Web 平台功能(例如 Service Worker、地理定位以及摄像头和麦克风访问权限)将无法供您的 Web 应用使用。上文所述的 adb reverse 和 Chrome 开发者工具端口转发方法不存在此问题,因为它们可让您将 WebView 指向可信的主机名 localhost。