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: le schede personalizzate e le WebView. Utilizza un browser in-app quando hai un link o un annuncio che rimanda a una pagina web. Puoi aprire questa 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. Fare clic su un link in-app (a sinistra) e aprire un browser in-app utilizzando una scheda personalizzata (a destra).

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

Confronto rapido

Utilizza la seguente tabella per decidere quale strumento soddisfa le tue esigenze:

Funzionalità WebView Schede personalizzate
Caso d'uso principale Creazione di app ibride con il web come contenuti principali o di supporto, visualizzazione di annunci, campagne in-app o pagine dei termini di servizio. Visualizzazione di contenuti di siti web esterni (ad esempio articoli di notizie o pagine di prodotto).
Controllo UI Full. È un componente View che puoi posizionare ovunque. Controlli tutta l'interfaccia utente circostante. Limitata. Puoi personalizzare il colore della barra degli strumenti e aggiungere alcune azioni personalizzate.
Dati e sessioni Sandbox. Non condivide cookie o accessi con il browser principale dell'utente. Condiviso. Utilizza la sessione del browser predefinito dell'utente, inclusi i cookie e le password salvate.
Bridge nativo <-> web Sì. Puoi utilizzare un bridge JavaScript per una comunicazione profonda e bidirezionale 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 degli sviluppatori Alto. Devi gestire personalmente il ciclo di vita, la navigazione e il rendimento. 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 distribuire 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 saperne di più, consulta l'articolo Creare 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 pulsante di azione rapida) si trovano uno accanto all'altro.
  • Contenuti proprietari: i tuoi contenuti web sono una parte interattiva fondamentale dell'esperienza dell'app, come un editor di documenti o un canvas di progettazione.
  • Controllo completo dell'interfaccia utente:devi modificare i contenuti della pagina web o sovrapporre elementi dell'interfaccia utente nativa.
  • Analisi approfondita:hai bisogno di informazioni dettagliate sul coinvolgimento e sull'attività degli utenti all'interno della visualizzazione web.

Compromessi chiave

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

  • Prestazioni:WebView può richiedere molta memoria. Se non lo gestisci con attenzione, puoi riscontrare problemi di prestazioni o errori ANR (App Not Responding).
  • Sicurezza e manutenzione:sei responsabile di rafforzare la sicurezza e gestire il ciclo di vita. Tuttavia, gli aggiornamenti di WebView vengono implementati 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 scorre sopra la tua 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 cui non sei proprietario, 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 avviare un'esperienza web incorporata.
  • Stato condiviso:poiché condivide i cookie con il browser predefinito dell'utente, gli utenti non devono accedere di nuovo ai siti che hanno già visitato.
  • Accesso di terze parti:sono adatti ai flussi di accesso di terze parti (ad esempio "Accedi con Google" o "Accedi con Facebook") in quanto il browser gestisce le credenziali in modo sicuro.

Sebbene la maggior parte dei browser supporti le schede personalizzate, alcuni offrono più personalizzazione rispetto ad altri. Per ulteriori informazioni, vedi Supporto dei browser.

Utilizzare i contenuti web in Jetpack Compose

Puoi utilizzare sia le schede personalizzate sia WebView quando crei con Jetpack Compose:

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

Risorse aggiuntive

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