Questa pagina è stata tradotta dall'API Cloud Translation.

Applicazioni WebView per sviluppatori web

Data di pubblicazione: 28 febbraio 2014

Scopri come creare un nuovo progetto Android, aggiungere una visualizzazione web, caricare un URL remoto e caricare una pagina HTML locale.

Questo tutorial presuppone che tu sia uno sviluppatore con esperienza limitata o nessuna con l'ambiente di sviluppo Android, ma che abbia una certa esperienza con Kotlin. Se hai già familiarità con la programmazione per Android, ti consigliamo di leggere Creare app web in WebView sul sito Android for Developers.

Installa Android Studio

Questo tutorial utilizza Android Studio, l'IDE di progettazione e compilazione per Android.

Creare un nuovo progetto Android

Una volta installato Android Studio, viene avviata la configurazione guidata.

Per creare un nuovo progetto:

Fai clic su Nuovo progetto.
Fai clic sul modello Attività vuota per selezionarlo per il tuo progetto. I modelli creano la struttura del progetto e i file necessari per la compilazione del progetto da parte di Android Studio.
Fai clic su Avanti per aprire la finestra di dialogo Nuovo progetto.
Configura il progetto. Inserisci il nome dell'applicazione, il nome del pacchetto e gli SDK di destinazione. Quindi, fai clic su Next.
Imposta SDK minimo richiesto su API 24: Android 7.0 (Nougat).
Fai clic su Fine

Android Studio apre il nuovo progetto.

Struttura del progetto

Il progetto iniziale creato da Android Studio contiene codice boilerplate per configurare la tua applicazione. Alcune delle cartelle più importate includono:

src/main/java. Codice sorgente Java per Android.
src/main/res. Risorse utilizzate dall'applicazione.
src/main/res/drawable. Risorse immagine utilizzate dall'applicazione.
src/main/res/xml. File di layout XML che definiscono la struttura dei componenti dell'interfaccia utente.
src/main/res/values. Dimensioni, stringhe e altri valori che potresti non voler codificare nella tua applicazione.
src/main/AndroidManifest.xml. Il file manifest definisce cosa è incluso nell'applicazione, ad esempio attività, autorizzazioni e temi.

Aggiungi WebView

Aggiungi un WebView al layout dell'attività principale.

Apri il file activity_main.xml nella directory src/main/res/xml, se non è già aperto. Potresti anche vedere un file fragment_main.xml. Puoi ignorarlo, perché non è obbligatorio per questo tutorial.

Seleziona la scheda Testo nella parte inferiore dell'editor activity_main.xml per visualizzare il markup XML.

Questo file definisce il layout dell'attività principale e i riquadri Anteprima mostrano un'anteprima dell'attività. Il layout Attività vuota non include elementi secondari. Dovrai aggiungere WebView.

Nel riquadro XML, rimuovi la barra verticale di chiusura automatica dalla fine dell'elemento FrameLayout e aggiungi l'elemento <WebView> e un nuovo tag di chiusura, come mostrato:

<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    tools:ignore="MergeRootFrame">

    <WebView
      android:id="@+id/activity_main_webview"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</FrameLayout>

Per utilizzare WebView, devi fare riferimento a questa funzionalità nell'attività. Apri il file di origine Java per l'attività principale, MainActivity.java, nella directory src/main/java/<PackageName>.

Aggiungi le righe in grassetto.
```
public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
```
Il codice esistente nel metodo onCreate si occupa di collegare l'attività al layout. Le righe aggiunte creano una nuova variabile membro, mWebView, per fare riferimento alla visualizzazione web.

Rimuovi il seguente codice:
```
if (savedInstanceState == null) {
  getSupportFragmentManager().beginTransaction()
    .add(R.id.container, new PlaceholderFragment())
    .commit();
}
```
WebView è identificato dall'ID risorsa, specificato da questa riga nel file di layout:
```
android:id="@+id/activity_main_webview"
```
Dopo aver aggiunto il codice, vedrai alcuni messaggi di avviso nel margine dell'editor. Questo accade perché non hai importato i pacchetti di classi corretti per WebView. Fortunatamente, Android Studio può aiutarti a inserire le classi mancanti. Il modo più semplice per farlo è fare clic e passare il mouse sopra un nome di classe sconosciuto e attendere che un modulo mostri una "correzione rapida", in questo caso l'aggiunta di un'istruzione import per la classe WebView.

Premi Alt + Invio (Opzione + Invio su Mac) per accettare la correzione rapida.

Una volta configurato il componente WebView, puoi procedere con il caricamento di contenuti web interessanti.

Attiva JavaScript

WebView non consente JavaScript per impostazione predefinita. Per eseguire un'applicazione web in WebView, devi attivare esplicitamente JavaScript aggiungendo le seguenti righe al metodo onCreate:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Caricare un URL remoto

Se vuoi caricare dati da un URL remoto, la tua applicazione ha bisogno dell'autorizzazione per accedere a internet. Questa autorizzazione deve essere aggiunta nel file manifest dell'applicazione.

Apri il file AndroidManifest.xml nella directory src/res. Aggiungi la riga in grassetto prima del tag di chiusura </manifest>.

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
...
 
  </application>
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

Il passaggio successivo consiste nel chiamare il metodo loadUrl nella webview. Aggiungi la seguente riga alla fine del metodo onCreate.
```
mWebView.loadUrl("[https://beta.html5test.com/][8]");
```
Ora prova a eseguire il progetto. Se non hai un dispositivo a portata di mano, puoi creare un emulatore (AVD o Android Virtual Device) andando a Strumenti > Android > Gestione AVD.

Gestire la navigazione

Prova a modificare l'URL che stai caricando in https://www.css-tricks.com/ e a eseguire nuovamente la tua applicazione. Noterai qualcosa di strano.

Se esegui l'applicazione ora con un sito che ha un reindirizzamento come css-tricks.com, l'app aprirà il sito in un browser sul dispositivo, non in WebView, probabilmente non è quello che ti aspettavi. Questo accade a causa del modo in cui WebView gestisce gli eventi di navigazione.

Ecco la sequenza di eventi:

WebView tenta di caricare l'URL originale dal server remoto e riceve un reindirizzamento a un nuovo URL.
WebView controlla se il sistema può gestire un'intent di visualizzazione per l'URL. Se così è, il sistema gestisce la navigazione dell'URL, altrimenti WebView esegue la navigazione internamente (ad esempio, se l'utente non ha installato un browser sul proprio dispositivo).
Il sistema sceglie l'applicazione preferita dall'utente per gestire uno schema URL https://, ovvero il browser predefinito dell'utente. Se hai installato più di un browser, a questo punto potresti visualizzare una finestra di dialogo.

Se utilizzi WebView all'interno di un'applicazione per Android per visualizzare contenuti (ad esempio una pagina di assistenza), potrebbe essere esattamente ciò che vuoi fare. Tuttavia, per applicazioni più sofisticate, ti consigliamo di gestire autonomamente i link di navigazione.

Per gestire la navigazione all'interno di WebView, devi sostituire WebViewClient di WebView, che gestisce vari eventi generati da WebView. Puoi utilizzarlo per controllare la modalità di gestione da parte di WebView dei clic sui link e dei reindirizzamenti di pagina.

L'implementazione predefinita di WebViewClient fa sì che qualsiasi URL si apra in WebView:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

Si tratta di un buon passo avanti, ma cosa succede se vuoi gestire i link solo per il tuo sito, aprendo contemporaneamente altri URL in un browser?

Per farlo, devi estendere la classe WebViewClient e implementare il metodo shouldOverrideUrlLoading. Questo metodo viene chiamato ogni volta che WebView tenta di accedere a un URL diverso. Se restituisce false, WebView apre l'URL stesso. L'implementazione predefinita sempre restituisce false, motivo per cui funziona nell'esempio precedente.

Crea un nuovo corso:

Fai clic con il tasto destro del mouse sul nome del pacchetto dell'app e seleziona Nuovo > Classe Java.
Inserisci MyAppWebViewClient come nome del corso e fai clic su OK.
Nel nuovo file MyAppWebViewClient.java, aggiungi il seguente codice (le modifiche sono in grassetto):
```
public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
      return false;
    }
               
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}
```
Il nuovo codice definisce MyAppWebViewClient come sottoclasse di WebViewClient e implementa il metodo shouldOverrideUrlLoading.

Il metodo shouldOverrideUrlLoading viene chiamato ogni volta che WebView sta per caricare un URL. Questa implementazione verifica la stringa "css-tricks.com" alla fine del nome host dell'URL. Se la stringa esiste, il metodo restituisce false, il che indica alla piattaforma di non eseguire l'override dell'URL, ma di caricarlo in WebView.

Per qualsiasi altro nome host, il metodo invia una richiesta al sistema per aprire l'URL. Per farlo, crea un nuovo Intent Android e lo utilizza per avviare una nuova attività. Il ritorno di true alla fine del metodo impedisce il caricamento dell'URL in WebView.
Per utilizzare il nuovo WebViewClient personalizzato, aggiungi le seguenti righe alla classe MainActivity:
```
// Stop local links and redirects from opening in browser instead of WebView
mWebView.setWebViewClient(new MyAppWebViewClient());
```
Ora un utente può fare clic su uno dei link di CSS Tricks e rimanere all'interno dell'app, mentre i link a siti esterni vengono aperti in un browser.

Gestire il pulsante Indietro di Android

Quando inizi a navigare tra gli articoli di CSS Tricks, facendo clic sul pulsante Indietro su Android esci dall'applicazione.

Il metodo WebView canGoBack indica se nella pila di pagine c'è qualcosa che può essere visualizzato. Per rilevare la pressione del pulsante Indietro e determinare se deve essere eseguito un passaggio indietro nella cronologia di WebView o se consentire alla piattaforma di determinare il comportamento corretto, aggiungi il metodo onBackPressed() a MainActivity:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

Carica HTML dal file system

Un grande vantaggio dell'utilizzo di un componente WebView all'interno di un'applicazione installabile è che puoi memorizzare gli asset all'interno dell'app. In questo modo, l'app può funzionare offline e i tempi di caricamento migliorano, poiché WebView può recuperare gli asset direttamente dal sistema di file locale.

Per archiviare i file localmente, inclusi HTML, JavaScript e CSS, archiviali nella directory assets. Si tratta di una directory riservata utilizzata da Android per i file RAW. La tua app ha bisogno di accedere a questa directory, in quanto potrebbe dover ridurre al minimo o comprimere determinati file.

Crea la directory assets/www in main (src/main/assets/www).
- È buona norma conservare i file web in una sottodirectory di /assets.
Nota: in WebView funzionano solo i percorsi relativi quando fanno riferimento ad altri file, come CSS e JavaScript. Anziché utilizzare percorsi assoluti, come/pages/somelink.html, utilizza percorsi relativi, come ./pages/somelink.html.
Carica tutti i file nella directory.

Carica il file appropriato:

mWebView.loadUrl("file:///android_asset/www/index.html");

Aggiorna il metodo shouldOverrideUrlLoading per aprire un browser per le pagine non locali:

public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().length() == 0) {
      return false;
    }

    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}

Ora puoi creare un'app WebView eccezionale.

Per suggerimenti su come ottenere immagini perfette, consulta Interfaccia utente perfetta in WebView.

Se riscontri problemi, Strumenti per sviluppatori di Chrome sono a tua disposizione. Per iniziare, consulta Debug remoto su Android.