Utilizza WebView
per pubblicare un'applicazione web
o una pagina web come parte di un'applicazione client. Il corso WebView
è un'estensione della classe View
di Android che ti consente di visualizzare le pagine web come parte del layout delle tue attività. Non include le funzionalità di un browser web completamente sviluppato, come i controlli di navigazione o la barra degli indirizzi. Per impostazione predefinita, WebView
mostra solo una pagina web.
WebView
può aiutarti a fornire nella tua app informazioni che potresti dover aggiornare, ad esempio un contratto con l'utente finale o una guida dell'utente. Nell'app per Android, puoi creare una Activity
che contenga una WebView
e utilizzarla per visualizzare il tuo documento ospitato online.
WebView
può essere utile anche quando la tua app fornisce all'utente dati che richiedono una
connessione a internet per recuperare dati, ad esempio le email. In questo caso, potresti scoprire che è più semplice creare un elemento WebView
nella tua app per Android che mostri una pagina web con tutti i dati utente, anziché eseguire una richiesta di rete e poi analizzarli e visualizzarli in un layout Android. Puoi, invece, progettare
una pagina web personalizzata per i dispositivi Android e implementare un
WebView
nell'app Android che carichi la pagina web.
Questo documento descrive come iniziare a utilizzare WebView
, come associare JavaScript dalla pagina web al codice lato client nella tua app per Android, come gestire la navigazione nelle pagine e come gestire le finestre quando utilizzi WebView
.
Utilizzare WebView su versioni precedenti di Android
Per utilizzare in modo sicuro le funzionalità di WebView
più recenti sul dispositivo su cui è in esecuzione la tua app, aggiungi la libreria AndroidX Webkit. Questa è una libreria statica che puoi aggiungere all'applicazione per utilizzare le API android.webkit
che non sono disponibili per le versioni precedenti della piattaforma.
Aggiungilo al tuo file build.gradle
nel seguente modo:
Kotlin
dependencies { implementation("androidx.webkit:webkit:1.8.0") }
Alla moda
dependencies { implementation ("androidx.webkit:webkit:1.8.0") }
Esplora l'esempio
WebView
su GitHub per maggiori dettagli.
Aggiungi un componente WebView all'app
Per aggiungere un elemento WebView
alla tua app, puoi includere l'elemento <WebView>
nel
layout delle attività o impostare l'intera finestra Activity
come WebView
in
onCreate()
.
Aggiungi una WebView nel layout dell'attività
Per aggiungere WebView
alla tua app nel layout, aggiungi il seguente codice al file XML di layout dell'attività:
<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" />
Per caricare una pagina web in WebView
, utilizza
loadUrl()
, come
mostrato nell'esempio seguente:
Kotlin
val myWebView: WebView = findViewById(R.id.webview) myWebView.loadUrl("http://www.example.com")
Java
WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("http://www.example.com");
Aggiungi un componente WebView in onCreate()
Per aggiungere invece un WebView
alla tua app nel metodo onCreate()
di un'attività, utilizza
una logica simile alla seguente:
Kotlin
val myWebView = WebView(activityContext) setContentView(myWebView)
Java
WebView myWebView = new WebView(activityContext); setContentView(myWebView);
Quindi carica la pagina:
Kotlin
myWebView.loadUrl("http://www.example.com")
Java
myWebView.loadUrl("https://www.example.com");
Oppure carica l'URL da una stringa HTML:
Kotlin
// Create an unencoded HTML string, then convert the unencoded HTML string into // bytes. Encode it with base64 and load the data. val unencodedHtml = "<html><body>'%23' is the percent code for ‘#‘ </body></html>"; val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING) myWebView.loadData(encodedHtml, "text/html", "base64")
Java
// Create an unencoded HTML string, then convert the unencoded HTML string into // bytes. Encode it with base64 and load the data. String unencodedHtml = "<html><body>'%23' is the percent code for ‘#‘ </body></html>"; String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(), Base64.NO_PADDING); myWebView.loadData(encodedHtml, "text/html", "base64");
L'app deve avere accesso a internet. Per ottenere l'accesso a internet, richiedi l'autorizzazione INTERNET
nel file manifest, come mostrato nell'esempio seguente:
<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... </manifest>
Puoi personalizzare WebView
in uno dei seguenti modi:
- Attivazione del supporto a schermo intero utilizzando
WebChromeClient
. Questa classe viene chiamata anche quando unWebView
necessita dell'autorizzazione per modificare l'interfaccia utente dell'app host, ad esempio per creare o chiudere finestre o inviare finestre di dialogo JavaScript all'utente. Per scoprire di più sul debug in questo contesto, consulta Eseguire il debug delle app web. - Gestione degli eventi che influiscono sul rendering dei contenuti, ad esempio errori nell'invio di moduli o nella navigazione utilizzando
WebViewClient
. Puoi anche utilizzare questa sottoclasse per intercettare il caricamento dell'URL. - Abilitando JavaScript modificando
WebSettings
. - Utilizzo di JavaScript per accedere agli oggetti del framework Android inseriti in un
WebView
.
Utilizzare JavaScript in WebView
Se la pagina web che vuoi caricare in WebView
utilizza JavaScript, devi
abilitare JavaScript per WebView
. Dopo aver attivato JavaScript, puoi creare interfacce tra il codice dell'app e il codice JavaScript.
Attivare JavaScript
JavaScript è disattivato per impostazione predefinita in WebView
. Puoi abilitarlo tramite il
WebSettings
collegato a WebView
. Recupera WebSettings
con
getSettings()
, quindi attiva
JavaScript con
setJavaScriptEnabled()
.
Vedi l'esempio che segue:
Kotlin
val myWebView: WebView = findViewById(R.id.webview) myWebView.settings.javaScriptEnabled = true
Java
WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true);
WebSettings
consente di accedere a una serie di altre impostazioni che potrebbero esserti utili. Ad esempio, se stai sviluppando un'applicazione web progettata specificatamente per WebView
nella tua app per Android, puoi definire una stringa dello user agent personalizzata con setUserAgentString()
, quindi eseguire una query allo user agent personalizzato nella tua pagina web per verificare che il client che richiede la pagina web sia la tua app per Android.
Associa il codice JavaScript al codice Android
Quando sviluppi un'applicazione web progettata specificatamente per WebView
nella tua app per Android, puoi creare interfacce tra il codice JavaScript e il codice Android lato client. Ad esempio, il codice JavaScript può chiamare un metodo nel
tuo codice Android per visualizzare un elemento Dialog
,
anziché utilizzare la funzione alert()
di JavaScript.
Per associare una nuova interfaccia tra il codice JavaScript e quello Android, richiama
addJavascriptInterface()
,
trasmette un'istanza di classe per l'associazione a JavaScript e un nome di interfaccia
che JavaScript può chiamare per accedere alla classe.
Ad esempio, puoi includere il seguente corso nella tua app per Android:
Kotlin
/** Instantiate the interface and set the context. */ class WebAppInterface(private val mContext: Context) { /** Show a toast from the web page. */ @JavascriptInterface fun showToast(toast: String) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show() } }
Java
public class WebAppInterface { Context mContext; /** Instantiate the interface and set the context. */ WebAppInterface(Context c) { mContext = c; } /** Show a toast from the web page. */ @JavascriptInterface public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } }
In questo esempio, la classe WebAppInterface
consente alla pagina web di creare un messaggio Toast
utilizzando il metodo showToast()
.
Puoi associare questa classe al codice JavaScript eseguito in WebView
con
addJavascriptInterface()
, come mostrato nell'esempio seguente:
Kotlin
val webView: WebView = findViewById(R.id.webview) webView.addJavascriptInterface(WebAppInterface(this), "Android")
Java
WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new WebAppInterface(this), "Android");
Viene creata un'interfaccia denominata Android
per JavaScript in esecuzione in
WebView
. A questo punto, la tua applicazione web ha accesso alla classe WebAppInterface
. Ad esempio, ecco alcuni elementi HTML e JavaScript che
creano un messaggio toast utilizzando la nuova interfaccia quando l'utente tocca un pulsante:
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /> <script type="text/javascript"> function showAndroidToast(toast) { Android.showToast(toast); } </script>
Non è necessario inizializzare l'interfaccia Android
da JavaScript. Il WebView
lo rende automaticamente disponibile sulla tua pagina web. In questo modo, quando un utente
tocca il pulsante, la funzione showAndroidToast()
utilizza l'interfaccia Android
per chiamare il metodo WebAppInterface.showToast()
.
Gestire la navigazione nelle pagine
Per impostazione predefinita, quando l'utente tocca un link da una pagina web nel tuo WebView
, Android avvia un'app che gestisce gli URL. In genere, il browser web predefinito si apre e carica l'URL di destinazione. Tuttavia, puoi ignorare questo comportamento per WebView
in modo che i link vengano aperti in WebView
. Puoi quindi consentire all'utente
di spostarsi avanti e indietro nella cronologia delle pagine web gestita
dal tuo WebView
.
Per aprire i link toccati dall'utente, fornisci un WebViewClient
per il tuo WebView
utilizzando
setWebViewClient()
.
Tutti i link toccati dall'utente vengono caricati in WebView
. Se vuoi avere un maggiore controllo su dove viene caricato un link su cui è stato fatto clic, crea un tuo WebViewClient
che sostituisce il metodo shouldOverrideUrlLoading()
. L'esempio seguente presuppone che MyWebViewClient
sia una classe interna di Activity
.
Kotlin
private class MyWebViewClient : WebViewClient() { override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean { if (Uri.parse(url).host == "www.example.com") { // This is your website, so don't override. Let your WebView load // the page. return false } // Otherwise, the link isn't for a page on your site, so launch another // Activity that handles URLs. Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply { startActivity(this) } return true } }
Java
private class MyWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { if ("www.example.com".equals(request.getUrl().getHost())) { // This is your website, so don't override. Let your WebView load the // page. return false; } // Otherwise, the link isn't for a page on your site, so launch another // Activity that handles URLs. Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl()); startActivity(intent); return true; } }
Quindi crea un'istanza di questo nuovo WebViewClient
per WebView
:
Kotlin
val myWebView: WebView = findViewById(R.id.webview) myWebView.webViewClient = MyWebViewClient()
Java
WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.setWebViewClient(new MyWebViewClient());
Ora, quando l'utente tocca un link, il sistema chiama il metodo shouldOverrideUrlLoading()
, che verifica se l'host dell'URL corrisponde a un dominio specifico, come definito nell'esempio precedente. Se corrisponde, il metodo restituisce false e non sostituisce il caricamento dell'URL. Consente a WebView
di caricare l'URL come al solito. Se l'host dell'URL non corrisponde, viene creata una Intent
per avviare l'elemento Activity
predefinito per la gestione degli URL, che si risolve nel browser web predefinito dell'utente.
Gestire gli URL personalizzati
WebView
applica limitazioni quando richiedi risorse e risolvi i link
che utilizzano uno schema URL personalizzato. Ad esempio, se implementi callback come
shouldOverrideUrlLoading()
o
shouldInterceptRequest()
,
WebView
li richiama solo per gli URL validi.
Ad esempio, WebView
potrebbe non chiamare il tuo metodo shouldOverrideUrlLoading()
per link come questo:
<a href="showProfile">Show Profile</a>
Gli URL non validi, come quello mostrato nell'esempio precedente, vengono gestiti in modo incoerente in WebView
, quindi ti consigliamo di utilizzare un URL corretto.
Puoi utilizzare uno schema personalizzato o un URL HTTPS per un dominio controllato dalla tua organizzazione.
Anziché utilizzare una semplice stringa in un link, come nell'esempio precedente, puoi utilizzare uno schema personalizzato come il seguente:
<a href="example-app:showProfile">Show Profile</a>
Puoi quindi gestire questo URL nel tuo metodo shouldOverrideUrlLoading()
nel seguente modo:
Kotlin
// The URL scheme must be non-hierarchical, meaning no trailing slashes. const val APP_SCHEME = "example-app:" override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean { return if (url?.startsWith(APP_SCHEME) == true) { urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8") respondToData(urlData) true } else { false } }
Java
// The URL scheme must be non-hierarchical, meaning no trailing slashes. private static final String APP_SCHEME = "example-app:"; @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (url.startsWith(APP_SCHEME)) { urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8"); respondToData(urlData); return true; } return false; }
L'API shouldOverrideUrlLoading()
è pensata principalmente per avviare intent
per URL specifici. Quando la implementi, assicurati di restituire false
per gli URL
degli handle WebView
. Tuttavia, non devi limitarti al lancio degli intent. Puoi sostituire gli intent di avvio con qualsiasi comportamento personalizzato negli esempi di codice precedenti.
Navigare nella cronologia delle pagine web
Quando WebView
sostituisce il caricamento degli URL, accumula automaticamente una
cronologia delle pagine web visitate. Puoi spostarti avanti e indietro nella cronologia con goBack()
e goForward()
.
Ad esempio, quanto segue mostra in che modo Activity
può utilizzare il pulsante Indietro
per tornare indietro:
Kotlin
override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean { // Check whether the key event is the Back button and if there's history. if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) { myWebView.goBack() return true } // If it isn't the Back button or there isn't web page history, bubble up to // the default system behavior. Probably exit the activity. return super.onKeyDown(keyCode, event) }
Java
@Override public boolean onKeyDown(int keyCode, KeyEvent event) { // Check whether the key event is the Back button and if there's history. if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) { myWebView.goBack(); return true; } // If it isn't the Back button or there's no web page history, bubble up to // the default system behavior. Probably exit the activity. return super.onKeyDown(keyCode, event); }
Se la tua app utilizza AndroidX AppCompat
1.6.0 o versioni successive, puoi
semplificare ulteriormente lo snippet precedente:
Kotlin
onBackPressedDispatcher.addCallback { // Check whether there's history. if (myWebView.canGoBack()) { myWebView.goBack() } }
Java
onBackPressedDispatcher.addCallback { // Check whether there's history. if (myWebView.canGoBack()) { myWebView.goBack(); } }
Il metodo canGoBack()
restituisce true se l'utente ha a disposizione una cronologia della pagina web visitabile. Analogamente, puoi utilizzare canGoForward()
per verificare se è presente una cronologia di inoltro. Se non esegui questo controllo, dopo che l'utente avrà raggiunto la fine della cronologia, goBack()
e goForward()
non faranno nulla.
Gestire le modifiche alla configurazione del dispositivo
Durante il runtime, i cambiamenti dello stato dell'attività si verificano quando la configurazione di un dispositivo cambia, ad esempio quando gli utenti ruotano il dispositivo o ignorano un editor del metodo di immissione (IME). Queste modifiche comportano l'eliminazione dell'attività di un oggetto WebView
e la creazione di una nuova attività, il che comporta anche la creazione di un nuovo oggetto WebView
che carica l'URL dell'oggetto eliminato. Per modificare il comportamento predefinito dell'attività, puoi cambiare il modo in cui gestisce le modifiche dell'attività orientation
nel file manifest. Per saperne di più
sulla gestione delle modifiche alla configurazione durante il runtime, consulta Gestire le
modifiche alla configurazione.
Gestisci finestre
Per impostazione predefinita, le richieste di apertura di nuove finestre vengono ignorate. Ciò vale indipendentemente dal fatto che vengano
aperte da JavaScript o dall'attributo target in un link. Puoi personalizzare WebChromeClient
in modo da indicare il tuo comportamento per l'apertura di più finestre.
Per proteggere la tua app, è meglio evitare l'apertura di popup e nuove finestre. Il modo più sicuro per implementare questo comportamento è trasferire "true"
a
setSupportMultipleWindows()
senza sostituire il metodo
onCreateWindow()
da cui dipende setSupportMultipleWindows()
. Questa logica impedisce il caricamento di qualsiasi pagina che utilizza target="_blank"
nei link.