Navigazione in-app utilizzando il web incorporato

I browser in-app offrono agli utenti un'esperienza web completa senza che debbano uscire dalla tua app. Android offre due API principali per l'implementazione dei browser in-app: Schede personalizzate e WebView. Utilizza un browser in-app quando hai un link o un annuncio che rimanda a una pagina web. Puoi aprire la pagina direttamente all'interno dell'app, come mostrato nella Figura 1.

Un link in-app in una casella rossa e una freccia che punta a un'altra schermata che mostra il link aperto con una scheda personalizzata.
Figura 1. Clic su un link in-app (a sinistra) e apertura di un browser in-app utilizzando una scheda personalizzata (a destra).

La scelta tra schede personalizzate e WebView è una decisione architetturale importante che influisce sulla velocità di sviluppo, sull'esperienza utente e sul livello di controllo che hai sulla UI.

Confronto rapido

Utilizza la seguente tabella per decidere quale strumento è più adatto alle tue esigenze:

Funzionalità WebView Schede personalizzate
Caso d'uso principale Creazione di app ibride con il web come contenuto principale o di supporto, visualizzazione di annunci display, campagne per app o pagine dei Termini di servizio. Visualizzazione di contenuti di siti web esterni (come articoli o pagine di prodotto).
Controllo UI Completo. Si tratta di un componente View che puoi posizionare ovunque. Controlli tutta la UI circostante. Limitata. Puoi personalizzare il colore della barra degli strumenti e aggiungere alcune azioni personalizzate.
Dati e sessioni Sandboxed. Non condivide cookie o dati di accesso con il browser principale dell'utente. Condiviso. Utilizza la sessione del browser predefinita dell'utente, inclusi i cookie e le password salvate.
Bridge nativo <-> web Sì. Puoi utilizzare un bridge JavaScript per una comunicazione bidirezionale approfondita tra i contenuti web e il codice dell'app nativa. Limitata. Puoi utilizzare il metodo window.postMessage() per il passaggio di stringhe di base.
Impegno dello sviluppatore Alta. Devi gestire autonomamente il ciclo di vita, la navigazione e le prestazioni. Basso. Puoi implementarlo con poche righe di codice.

WebView

Una WebView è una visualizzazione che rende le pagine web parte integrante del layout della tua app. È potente, ma è un po' più complesso da gestire rispetto alle schede personalizzate.

WebView può caricare contenuti web remoti o locali, eseguire JavaScript e consentire la comunicazione bidirezionale tra i contenuti web e il codice dell'app nativa. Per scoprire di più sulle sue funzionalità, consulta Cosa può fare WebView.

Puoi anche utilizzare WebView per fornire un'applicazione web o visualizzare una pagina web online come parte della tua app, ad esempio un contratto con l'utente finale che devi aggiornare periodicamente. Per scoprire di più, consulta Crea app web in WebView.

Perché scegliere WebView

Di seguito sono riportati alcuni scenari in cui WebView è una buona soluzione:

  • App ibride: stai creando un'app in cui i contenuti web e i componenti nativi (come una barra di navigazione o un Floating Action Button) convivono.
  • Contenuti proprietari:i tuoi contenuti web sono una parte fondamentale e interattiva dell'esperienza con l'app, ad esempio un editor di documenti o un canvas di progettazione.
  • Controllo completo dell'interfaccia utente:devi modificare i contenuti della pagina web stessa o sovrapporre elementi dell'interfaccia utente nativi.
  • Analisi approfondite: hai bisogno di informazioni dettagliate sul coinvolgimento e sull'attività degli utenti all'interno della visualizzazione web.

Compromessi principali

Di seguito sono riportati alcuni compromessi chiave da considerare quando utilizzi WebView:

  • Prestazioni:WebView può richiedere molta memoria. Se non lo gestisci con attenzione, potresti riscontrare problemi di prestazioni o ANR (errori "L'applicazione non risponde").
  • Sicurezza e manutenzione: sei responsabile del rafforzamento della sicurezza e della gestione del ciclo di vita. Ciò include la gestione della conservazione dello stato durante la ricreazione del processo utilizzando WebViewCompat.saveState() e il rispetto del limite di transazione dello stato salvato di 1 MB di Android. Tuttavia, gli aggiornamenti di WebView vengono rilasciati a livello globale tramite Google Play, quindi non devi preoccuparti che il motore sottostante diventi obsoleto.

Schede personalizzate

Le schede personalizzate sono un'ottima scelta per indirizzare gli utenti a URL esterni, in quanto forniscono una finestra del browser veloce, sicura e facile da usare che si apre sopra l'app.

Perché scegliere le schede personalizzate

Di seguito sono riportati alcuni scenari in cui le schede personalizzate sono una buona soluzione:

  • Link esterni: quando un utente tocca un link a un sito web di tua proprietà, le schede personalizzate lo mantengono nel contesto della tua app, offrendo al contempo un'esperienza di navigazione completa.
  • Facilità di integrazione: è il modo più semplice per creare un'esperienza web incorporata.
  • Stato condiviso:poiché condivide i cookie con il browser predefinito dell'utente, gli utenti non devono eseguire nuovamente l'accesso ai siti che hanno già visitato.
  • Accesso di terze parti:sono adatti per i flussi di accesso di terze parti (come "Accedi con Google" o "Accedi con Facebook"), poiché il browser gestisce le credenziali in modo sicuro.

Sebbene la maggior parte dei browser supporti le schede personalizzate, alcuni offrono più personalizzazione di altri. Per saperne di più, consulta Browser supportati.

Utilizza i contenuti web in Jetpack Compose

Puoi utilizzare sia le schede personalizzate sia WebView durante la creazione con Jetpack Compose:

  • Schede personalizzate: poiché le schede personalizzate utilizzano un Intent, puoi avviarle da qualsiasi Context nelle funzioni di Compose, per un'integrazione perfetta.
  • WebView: Compose non ha ancora un WebView componibile nativo, quindi dovrai utilizzare AndroidView per incorporare un WebView standard nel layout.

Risorse aggiuntive

Per sviluppare pagine web per dispositivi Android utilizzando le API WebView o Custom Tabs, consulta i seguenti documenti: