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
このコマンドを実行すると、デバイスまたはエミュレータの http://localhost:8080 にアプリの WebView を設定できます。これにより、WebView は開発マシンの localhost:8080 で実行されているウェブサーバーに接続できます。このメソッドは、USB で接続された物理デバイスと Android エミュレータの両方で動作します。
Chrome DevTools のポート転送を使用する
Chrome DevTools には、デバイスから開発用マシンにリクエストを転送するために使用できる独自のポート転送機能があります。
- Chrome DevTools を使用したデバッグの説明に沿って、デバッグ用にデバイスを設定します。
chrome://inspectページで、[ポート転送...] を選択します。- [ポート] フィールドに、開発マシンへのアクセスに使用する Android デバイスのポート番号を入力します。
- [IP アドレスとポート] フィールドに、開発マシンのウェブ サーバーのアドレスとポート番号を入力します。
- [ポート転送を有効にする] チェックボックスをオンにします。
- [完了] を選択します。
たとえば、[ポート] フィールドに 3000 を入力し、[IP アドレスとポート] フィールドに localhost:8000 を入力すると、WebView で http://localhost:3000 を指定したときに、localhost:8000 でリッスンしている開発マシンのウェブサーバーにアクセスできます。
ローカル ウェブサーバーにカスタム ドメイン名を使用することもできます。手順については、ポート転送を使用してローカル サーバーと Chrome インスタンスにアクセスするをご覧ください。
Android Emulator のパススルー IP アドレスを使用して接続する
Android エミュレータは、アプリから開発マシンに接続するための特別なパススルー IP アドレス 10.0.2.2 を提供します。WebView はこの IP アドレスを安全なコンテキストとして扱わないため、この方法は WebView のデバッグにはおすすめしません。その結果、多くのウェブ プラットフォーム機能（Service Worker、位置情報、カメラとマイクへのアクセスなど）がウェブアプリで利用できなくなります。前述の adb reverse と Chrome DevTools のポート転送方法では、WebView を信頼できるホスト名 localhost に指定できるため、この問題は発生しません。