Quando sviluppi contenuti web per WebView, può essere utile pubblicarli da un server web locale sulla macchina di sviluppo. Se accedi a questo server locale da una WebView su un dispositivo di test o un emulatore, puoi visualizzare rapidamente le modifiche senza eseguire il deployment su un server remoto. Questa pagina illustra diversi modi per accedere a un server web in esecuzione sulla macchina host da una WebView.
Configurare il port forwarding inverso con ADB
Puoi utilizzare Android Debug Bridge (ADB), uno strumento a riga di comando per
comunicare con il tuo dispositivo, per configurare l'inoltro inverso delle porte. Questa funzionalità
consente al tuo dispositivo o emulatore di accedere a un server web in esecuzione su localhost sulla tua
macchina di sviluppo.
adb ha un comando reverse che può inoltrare le richieste su una porta specifica del dispositivo a una porta diversa della macchina host.
Per utilizzare questa funzionalità, esegui questo comando nel terminale:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Sostituisci quanto segue:
DEVICE_PORT: la porta sul dispositivo a cui si connette la WebView della tua app. Ad esempio, 8080.HOST_PORT: la porta sulla macchina di sviluppo in cui è in esecuzione il server web. Ad esempio, 8080 o 3000.
Esempio:
Se il server di sviluppo locale è in esecuzione su localhost:8080 sulla tua
macchina di sviluppo, puoi inoltrare le richieste dal tuo dispositivo eseguendo
il seguente comando:
adb reverse tcp:8080 tcp:8080
Dopo aver eseguito questo comando, puoi indirizzare la WebView della tua app a
http://localhost:8080 sul dispositivo o sull'emulatore. La WebView può quindi connettersi
al server web in esecuzione su localhost:8080 sulla macchina di sviluppo. Questo
metodo funziona sia con i dispositivi fisici connessi tramite USB sia con l'emulatore
Android.
Utilizzare l'inoltro delle porte di Chrome DevTools
Chrome DevTools ha una propria funzionalità di port forwarding che puoi utilizzare per inoltrare le richieste dal tuo dispositivo alla tua macchina di sviluppo.
- Configura il dispositivo per il debug come descritto in Eseguire il debug utilizzando gli Strumenti per sviluppatori di Chrome.
- Nella pagina
chrome://inspect, seleziona Port forwarding…. - Nel campo Port (Porta), inserisci il numero di porta sul dispositivo Android che vuoi utilizzare per accedere alla macchina di sviluppo.
- Nel campo Indirizzo IP e porta, inserisci l'indirizzo e il numero di porta del server web della tua macchina di sviluppo.
- Seleziona la casella di controllo Abilita port forwarding.
- Seleziona Fine.
Ad esempio, se inserisci 3000 nel campo Porta e localhost:8000 nel campo
Indirizzo IP e porta, quando indirizzi WebView a
http://localhost:3000, può accedere al web server della tua macchina di sviluppo
in ascolto su localhost:8000.
Puoi anche utilizzare un nome di dominio personalizzato per il tuo server web locale. Per istruzioni su come eseguire questa operazione, vedi Accedere a server locali e istanze di Chrome con il port forwarding.
Connettiti utilizzando l'indirizzo IP pass-through di Android Emulator
L'emulatore Android fornisce l'indirizzo IP pass-through speciale 10.0.2.2 per
connettersi alla macchina di sviluppo dalla tua app. Questo metodo non è consigliato
per il debug di WebView perché WebView non tratterà questo indirizzo IP come
contesto sicuro. Di conseguenza, molte funzionalità della piattaforma web (come Service Worker, geolocalizzazione e accesso a videocamera e microfono) non saranno disponibili per la tua app web. I metodi di port forwarding di adb reverse e Chrome DevTools descritti in precedenza non presentano questo problema perché ti consentono di indirizzare la tua WebView all'hostname attendibile localhost.