Lorsque vous développez du contenu Web pour WebView, il peut être utile de diffuser du contenu à partir d'un serveur Web local sur votre machine de développement. Si vous accédez à ce serveur local depuis une WebView sur un appareil de test ou un émulateur, vous pouvez voir rapidement vos modifications sans les déployer sur un serveur distant. Cette page explique plusieurs façons d'accéder à un serveur Web exécuté sur votre machine hôte à partir d'une WebView.
Configurer le transfert de port inversé avec ADB
Vous pouvez utiliser Android Debug Bridge (adb), un outil de ligne de commande permettant de communiquer avec votre appareil, pour configurer le transfert de port inversé. Cette fonctionnalité permet à votre appareil ou émulateur d'accéder à un serveur Web exécuté sur localhost sur votre machine de développement.
adb dispose d'une commande reverse qui peut transférer les requêtes sur un port spécifique de l'appareil vers un autre port de la machine hôte.
Pour utiliser cette fonctionnalité, exécutez la commande suivante dans votre terminal :
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Remplacez les éléments suivants :
DEVICE_PORT: port de l'appareil auquel la WebView de votre application se connecte. Par exemple, 8080.HOST_PORT: port de votre machine de développement sur lequel votre serveur Web est exécuté. Par exemple, 8080 ou 3000.
Exemple :
Si votre serveur de développement local s'exécute sur localhost:8080 sur votre machine de développement, vous pouvez transférer les requêtes de votre appareil vers celui-ci en exécutant la commande suivante :
adb reverse tcp:8080 tcp:8080
Après avoir exécuté cette commande, vous pouvez pointer la WebView de votre application vers http://localhost:8080 sur l'appareil ou l'émulateur. La WebView peut ensuite se connecter au serveur Web exécuté sur localhost:8080 sur votre ordinateur de développement. Cette méthode fonctionne à la fois avec les appareils physiques connectés via USB et avec l'émulateur Android.
Utiliser le transfert de port des outils pour les développeurs Chrome
Les outils pour les développeurs Chrome disposent de leur propre fonctionnalité de transfert de port, que vous pouvez utiliser pour transférer les requêtes de votre appareil vers votre machine de développement.
- Configurez votre appareil pour le débogage, comme décrit dans Déboguer à l'aide des outils pour les développeurs Chrome.
- Sur la page
chrome://inspect, sélectionnez Transfert de port…. - Dans le champ Port (Port), saisissez le numéro de port sur l'appareil Android que vous souhaitez utiliser pour accéder à votre ordinateur de développement.
- Dans le champ Adresse IP et port, saisissez l'adresse et le numéro de port du serveur Web de votre machine de développement.
- Cochez la case Activer le transfert de port.
- Sélectionnez OK.
Par exemple, si vous saisissez 3000 dans le champ Port et localhost:8000 dans le champ Adresse IP et port, lorsque vous pointez votre WebView sur http://localhost:3000, elle peut accéder au serveur Web de votre machine de développement qui écoute sur localhost:8000.
Vous pouvez également utiliser un nom de domaine personnalisé pour votre serveur Web local. Pour savoir comment procéder, consultez Accéder aux serveurs locaux et aux instances Chrome avec le transfert de port.
Se connecter à l'aide de l'adresse IP de transfert d'Android Emulator
L'émulateur Android fournit l'adresse IP spéciale 10.0.2.2 pour se connecter à votre ordinateur de développement depuis votre application. Cette méthode n'est pas recommandée pour le débogage WebView, car votre WebView ne traitera pas cette adresse IP comme un contexte sécurisé. Par conséquent, de nombreuses fonctionnalités de la plate-forme Web (telles que les service workers, la géolocalisation et l'accès à l'appareil photo et au micro) ne seront pas disponibles pour votre application Web. Les méthodes de transfert de port adb reverse et Chrome DevTools décrites précédemment ne présentent pas ce problème, car elles vous permettent de pointer votre WebView vers le nom d'hôte de confiance localhost.