Crea app web in WebView

Utilizza WebView per pubblicare un'applicazione web o una pagina web come parte di un'applicazione client. La classe WebView è un'estensione della classe View di Android che ti consente di mostrare le pagine web come parte del layout delle 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 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 un elemento Activity contenente un WebView, quindi utilizzarlo per visualizzare il documento che è ospitato online.

WebView può essere d'aiuto 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, quindi analizzare i dati e eseguirne il rendering in un layout Android. Puoi però progettare una pagina web personalizzata per i dispositivi Android e quindi implementare un WebView nell'app Android che carica la pagina web.

Questo documento descrive come iniziare a utilizzare WebView, come associare JavaScript della pagina web al codice lato client nell'app per Android, come gestire la navigazione nelle pagine e le finestre quando utilizzi WebView.

Utilizzare WebView su versioni precedenti di Android

Per utilizzare in modo sicuro le funzionalità WebView più recenti sul dispositivo su cui viene eseguita la tua app, aggiungi la libreria AndroidX Webkit. Questa è una libreria statica che puoi aggiungere alla tua applicazione per utilizzare le API android.webkit che non sono disponibili per le versioni precedenti della piattaforma.

Aggiungila al tuo file build.gradle nel seguente modo:

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}

trendy

dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

Esplora l'esempio di WebView su GitHub per maggiori dettagli.

Aggiungere 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().

Aggiungere un componente WebView nel layout delle attività

Per aggiungere un elemento 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 elemento 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 mediante WebChromeClient. Questa classe viene chiamata anche quando un WebView ha bisogno 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 saperne di più sul debug in questo contesto, consulta Debug delle app web.
  • Gestione degli eventi che influiscono sul rendering dei contenuti, ad esempio errori durante l'invio di moduli o la navigazione, utilizzando WebViewClient. Puoi usare questa sottoclasse anche per intercettare il caricamento dell'URL.
  • Abilitando JavaScript modificando WebSettings.
  • Utilizzo di JavaScript per accedere agli oggetti del framework Android che hai inserito in un WebView.

Utilizzare JavaScript in WebView

Se la pagina web che vuoi caricare in WebView utilizza JavaScript, devi attivare JavaScript per WebView. Dopo aver attivato JavaScript, puoi creare interfacce tra il codice dell'app e il codice JavaScript.

Attivare JavaScript

JavaScript è disabilitato in WebView per impostazione predefinita. 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 potresti trovare utili. Ad esempio, se stai sviluppando un'applicazione web progettata appositamente per WebView nella tua app per Android, puoi definire una stringa dello user agent personalizzata con setUserAgentString(), quindi eseguire una query sullo user agent personalizzato nella tua pagina web per verificare che il client che richiede la tua pagina web sia la tua app per Android.

Associa il codice JavaScript al codice Android

Quando sviluppi un'applicazione web progettata appositamente 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 codice Android per visualizzare Dialog, invece di utilizzare la funzione alert() di JavaScript.

Per associare una nuova interfaccia tra il codice JavaScript e Android, chiama addJavascriptInterface(), passando un'istanza di classe da associare al tuo codice JavaScript e un nome dell'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 codici 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. L'WebView lo rende automaticamente disponibile sulla tua pagina web. Pertanto, 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 in 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 si aprano all'interno di WebView. Puoi quindi consentire all'utente di spostarsi avanti e indietro nella cronologia delle pagine web gestita da WebView.

Per aprire i link toccati dall'utente, fornisci un WebViewClient per 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 il tuo WebViewClient che sostituisca 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 di consueto. Se l'host dell'URL non corrisponde, viene creato un elemento Intent per avviare il valore Activity predefinito per la gestione degli URL, che viene risolto 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 consigliamo di utilizzare un URL con formato 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>

Dopodiché potrai gestire questo URL nel tuo metodo shouldOverrideUrlLoading() in questo 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() è destinata principalmente ad avviare intent per URL specifici. Quando la implementi, assicurati di restituire false per gli URL relativi agli handle WebView. Tuttavia, non devi limitarti a lanciare gli intent. Puoi sostituire gli intent di avvio con qualsiasi comportamento personalizzato negli esempi di codice precedenti.

Quando WebView sostituisce il caricamento dell'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ò usare il pulsante Indietro del dispositivo per spostarsi 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 usi un'app con 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 può visitare una cronologia delle pagine web. Analogamente, puoi utilizzare canGoForward() per controllare se è presente una cronologia di inoltro. Se non esegui questo controllo, dopo che l'utente ha raggiunto la fine della cronologia, goBack() e goForward() non fanno nulla.

Gestire le modifiche alla configurazione dei dispositivi.

Durante il runtime, le variazioni 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 la modalità di gestione delle modifiche relative a orientation nel manifest. Per scoprire 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 vengono 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, ti consigliamo di evitare l'apertura di popup e nuove finestre. Il modo più sicuro per implementare questo comportamento è passare "true" in setSupportMultipleWindows() ma non sostituire il metodo onCreateWindow(), da cui dipende setSupportMultipleWindows(). Questa logica impedisce il caricamento di qualsiasi pagina che utilizza target="_blank" nei suoi link.