Über WebView auf einen lokalen Entwicklungsserver zugreifen

Wenn Sie Webinhalte für WebView entwickeln, kann es hilfreich sein, Inhalte von einem lokalen Webserver auf Ihrem Entwicklungscomputer bereitzustellen. Wenn Sie über eine WebView auf einem Testgerät oder Emulator auf diesen lokalen Server zugreifen, können Sie Ihre Änderungen schnell sehen, ohne sie auf einem Remoteserver bereitzustellen. Auf dieser Seite werden verschiedene Möglichkeiten beschrieben, wie Sie über eine WebView auf einen Webserver zugreifen können, der auf Ihrem Hostcomputer ausgeführt wird.

Reverse-Portweiterleitung mit ADB einrichten

Sie können die Android Debug Bridge (adb) verwenden, ein Befehlszeilentool für die Kommunikation mit Ihrem Gerät, um Reverse Port Forwarding einzurichten. Mit dieser Funktion kann Ihr Gerät oder Emulator auf einen Webserver zugreifen, der auf localhost auf Ihrem Entwicklungscomputer ausgeführt wird.

adb hat einen reverse-Befehl, mit dem Anfragen an einem bestimmten Port auf dem Gerät an einen anderen Port auf dem Hostcomputer weitergeleitet werden können.

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um dieses Feature zu verwenden:

adb reverse tcp:DEVICE_PORT tcp:HOST_PORT

Ersetzen Sie dabei Folgendes:

  • DEVICE_PORT: Der Port auf dem Gerät, mit dem die WebView Ihrer App eine Verbindung herstellt. Beispiel: 8080.
  • HOST_PORT: Der Port auf Ihrem Entwicklungscomputer, auf dem Ihr Webserver ausgeführt wird. Beispiel: 8080 oder 3000.

Beispiel:

Wenn Ihr lokaler Entwicklungsserver auf Ihrem Entwicklungscomputer unter localhost:8080 ausgeführt wird, können Sie Anfragen von Ihrem Gerät an ihn weiterleiten, indem Sie den folgenden Befehl ausführen:

adb reverse tcp:8080 tcp:8080

Nachdem Sie diesen Befehl ausgeführt haben, können Sie die WebView Ihrer App auf dem Gerät oder Emulator auf http://localhost:8080 verweisen. Die WebView kann dann eine Verbindung zum Webserver herstellen, der auf localhost:8080 auf Ihrem Entwicklungscomputer ausgeführt wird. Diese Methode funktioniert sowohl mit physischen Geräten, die über USB verbunden sind, als auch mit dem Android-Emulator.

Portweiterleitung in den Chrome-Entwicklertools verwenden

Die Chrome-Entwicklertools haben eine eigene Portweiterleitungsfunktion, mit der Sie Anfragen von Ihrem Gerät an Ihren Entwicklungscomputer weiterleiten können.

  1. Richten Sie Ihr Gerät für das Debugging ein, wie im Abschnitt Mit Chrome-Entwicklertools debuggen beschrieben.
  2. Wählen Sie auf der Seite chrome://inspect die Option Portweiterleitung… aus.
  3. Geben Sie im Feld Port die Portnummer auf dem Android-Gerät ein, mit der Sie auf Ihren Entwicklungscomputer zugreifen möchten.
  4. Geben Sie im Feld IP-Adresse und Port die Webserveradresse und Portnummer Ihres Entwicklungscomputers ein.
  5. Klicken Sie das Kästchen Portweiterleitung aktivieren an.
  6. Wählen Sie Fertig aus.

Wenn Sie beispielsweise 3000 im Feld Port und localhost:8000 im Feld IP-Adresse und Port eingeben, kann Ihre WebView auf den Webserver Ihres Entwicklungscomputers zugreifen, der auf localhost:8000 wartet, wenn Sie sie auf http://localhost:3000 verweisen.

Sie können auch einen benutzerdefinierten Domainnamen für Ihren lokalen Webserver verwenden. Eine Anleitung dazu finden Sie unter Mit Portweiterleitung auf lokale Server und Chrome-Instanzen zugreifen.

Verbindung über die Pass-through-IP-Adresse des Android-Emulators herstellen

Der Android-Emulator bietet die spezielle Pass-Through-IP-Adresse 10.0.2.2, um von Ihrer App aus eine Verbindung zu Ihrem Entwicklungscomputer herzustellen. Diese Methode wird für das WebView-Debugging nicht empfohlen, da Ihr WebView diese IP-Adresse nicht als sicheren Kontext behandelt. Daher sind viele Webplattformfunktionen (z. B. Service Workers, Standort und Kamera- und Mikrofonzugriff) für Ihre Web-App nicht verfügbar. Die oben beschriebenen Methoden adb reverse und Chrome DevTools-Portweiterleitung haben dieses Problem nicht, da Sie damit Ihre WebView auf den vertrauenswürdigen Hostnamen localhost verweisen können.