Questa pagina è stata tradotta dall'API Cloud Translation.

Crea app web in WebView

Utilizza WebView per pubblicare un'applicazione web o una pagina web come parte di un'applicazione client. Il corso WebView è estensione della classe View di Android che consente le pagine web vengono visualizzate nel layout delle attività. Non include funzionalità di un browser web completamente sviluppato, come i controlli di navigazione o un barra degli indirizzi. Per impostazione predefinita, WebView mostra solo una pagina web.

WebView può aiutarti a fornire nella tua app informazioni di cui potresti aver bisogno un aggiornamento, ad esempio un contratto con l'utente finale o una guida dell'utente. Nell'app per Android, puoi creare una Activity che contiene un WebView, quindi utilizzalo per visualizzare il documento ospitato online.

WebView può essere utile anche quando la tua app fornisce all'utente dati che richiedono una connessione a internet per recuperare i dati, come le email. In questo caso, potresti scopri che è più facile creare un'WebView nella tua app per Android che mostra un con tutti i dati utente, invece di eseguire una richiesta di rete, analizzare i dati e eseguirne il rendering in un layout Android. Puoi invece progettare una pagina web personalizzata per i dispositivi Android e implementare una WebView nell'app Android che carica la pagina web.

Questo documento descrive come iniziare a utilizzare WebView e come eseguire l'associazione JavaScript dalla pagina web al codice lato client nell'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 sicurezza le funzionalità di WebView più recenti sul dispositivo, la tua app è in esecuzione, aggiungi l'app AndroidX nella libreria Webkit. Questa è un'istanza libreria 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 il WebView esempio su GitHub per maggiori dettagli.

Aggiungi un componente WebView all'app

Per aggiungere un WebView alla tua app, puoi includere l'elemento <WebView> nel tuo layout attività o imposta 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 alla tua 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, usa loadUrl(), come 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 WebView alla tua app nel metodo onCreate() di un'attività, usa 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 il Autorizzazione INTERNET in 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 con WebChromeClient Questo corso viene chiamato anche quando un WebView ha bisogno dell'autorizzazione per modificare l'UI dell'app host, come creare o chiudere finestre o inviare finestre di dialogo JavaScript al utente. Per scoprire di più sul debug in questo contesto, consulta Debug web Google Cloud.
Gestione degli eventi che influiscono sul rendering dei contenuti, ad esempio gli errori nel modulo contenuti o la navigazione usando WebViewClient Puoi anche utilizzare questa sottoclasse per intercettare il caricamento dell'URL.
Attivazione di JavaScript modificando la 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 attiva JavaScript per il tuo WebView. Dopo aver attivato JavaScript, puoi Creare interfacce tra il codice dell'app e il codice JavaScript.

Attiva JavaScript

JavaScript è disattivato per impostazione predefinita in WebView. Puoi abilitarlo tramite 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);

L'app WebSettings dà accesso a una serie di altre impostazioni che potresti trovare utile. Ad esempio, se stai sviluppando un'applicazione web progettata specifica per WebView nella tua app per Android, puoi definire una configurazione stringa dello user agent con setUserAgentString(), una query nello user agent personalizzato nella tua pagina web per verificare che che richiede la tua pagina web è la tua app Android.

Associa il codice JavaScript al codice Android

Durante lo sviluppo di un'applicazione web progettata specificatamente per il WebView Nell'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 in il tuo codice Android per visualizzare un Dialog anziché utilizzare la funzione alert() di JavaScript.

Per associare una nuova interfaccia tra il codice JavaScript e Android, chiama addJavascriptInterface(), passandole un'istanza di classe per l'associazione al tuo codice JavaScript e al nome di un'interfaccia che JavaScript può chiamare per accedere al corso.

Avviso: l'utilizzo di addJavascriptInterface() consente a JavaScript di controllare il tuo Android dell'app. Sebbene questo possa essere utile, può anche rappresentare un pericoloso problema di sicurezza. Quando il codice HTML nel file WebView non è attendibile, ad esempio in parte o del tutto del codice HTML viene fornito da una persona o da un processo sconosciuto, quindi un utente malintenzionato può includere il codice HTML che esegue il codice lato client ed eventualmente qualsiasi codice scelta dell'aggressore. Pertanto, non usare addJavascriptInterface() a meno che hai scritto tutto il codice HTML e JavaScript visualizzato nel tuo WebView. Azioni sconsigliate Consenti all'utente di navigare all'interno del tuo WebView verso pagine web di terzi. Consenti invece all'applicazione browser predefinita dell'utente di aprire i link esterni. Di per impostazione predefinita, il browser web dell'utente apre tutti i link URL, quindi questo avviso principalmente si applica se gestisci autonomamente la navigazione nelle pagine, come descritto .

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 una Toast, utilizzando 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 WebAppInterface corso. Ad esempio, ecco alcuni file HTML e JavaScript che crea 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. La WebView lo rende automaticamente disponibile sulla tua pagina web. Quindi, quando un utente Tocca il pulsante, la funzione showAndroidToast() utilizza l'interfaccia Android per chiamare il metodo WebAppInterface.showToast().

Gestire la navigazione nelle pagine

Quando l'utente tocca un link da una pagina web nel tuo WebView, per impostazione predefinita, Android avvia un'app che gestisce gli URL. In genere, si apre il browser web predefinito 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 possono spostarsi avanti e indietro nella cronologia delle pagine web mantenuta dal tuo 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 dove viene caricato un link su cui viene fatto clic, crea il tuo WebViewClient che sostituisce la 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 shouldOverrideUrlLoading(), che verifica se l'host dell'URL corrisponde un dominio specifico, come definito nell'esempio precedente. Se corrisponde, Il metodo restituisce false e non sostituisce il caricamento dell'URL. Consente al WebView caricano l'URL come di consueto. Se l'host dell'URL non corrisponde, Intent è stato creato per avviare l'app predefinita Activity 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(), allora 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>

Vengono gestiti gli URL non validi, come quello mostrato nell'esempio precedente. in modo non coerente in WebView, quindi consigliamo di usare un URL ben strutturato. Puoi utilizzare uno schema personalizzato o un URL HTTPS per un dominio che la tua organizzazione i controlli di sicurezza.

Invece di 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(), ad esempio questo:

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. Durante l'implementazione, assicurati di restituire false per gli URL gli handle WebView. Tuttavia, non devi limitarti al lancio degli intent. Puoi sostituire gli intent di avvio con un comportamento personalizzato nel codice precedente i campioni.

Navigare nella cronologia delle pagine web

Quando WebView sostituisce il caricamento dell'URL, accumula automaticamente un cronologia delle pagine web visitate. Puoi spostarti avanti e indietro nel cronologia con goBack() e goForward().

Ad esempio, quanto segue mostra in che modo Activity può utilizzare il dispositivo Indietro pulsante 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 la procedura altri snippet di codice:

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ò visualizzare una cronologia della pagina web. Allo stesso modo, puoi utilizzare canGoForward() per controllare se è presente una cronologia di inoltro. Se non esegui questo controllo, quando l'utente raggiunge la fine della cronologia, goBack() e goForward() lo fanno niente.

Gestire le modifiche alla configurazione del dispositivo

Durante il runtime, lo stato delle attività cambia quando la configurazione Modifiche, ad esempio quando gli utenti ruotano il dispositivo o ignorano l'editor di un metodo di immissione (IME). Queste modifiche causano l'eliminazione dell'attività di un oggetto WebView e un nuova attività da creare, che crea anche un nuovo oggetto WebView che carica dell'oggetto eliminato. Per modificare il comportamento predefinito della tua attività, puoi: cambia il modo in cui gestisce le modifiche relative a orientation nel file manifest. Per scoprire di più sulla gestione delle modifiche alla configurazione durante il runtime, leggi Gestire la configurazione modifiche.

Gestisci finestre

Per impostazione predefinita, le richieste di apertura di nuove finestre vengono ignorate. Ciò avviene indipendentemente dal fatto che vengono aperte da JavaScript o dall'attributo target in un link. Puoi personalizzare WebChromeClient per indicare il tuo comportamento per l'apertura di più finestre.

Per mantenere la tua app più sicura, è meglio evitare popup e nuove finestre apertura in corso. Il modo più sicuro per implementare questo comportamento è trasferire "true" a setSupportMultipleWindows() senza sovrascrivere onCreateWindow() da cui dipende setSupportMultipleWindows(). Questa logica impedisce pagina che utilizza target="_blank" nei link per il caricamento.