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. 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 controllo che hai sull'interfaccia utente.

Confronto rapido

Utilizza la tabella seguente 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 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 es. articoli di notizie o pagine di prodotto).
Controllo dell'interfaccia utente Completo. È un componente View che puoi posizionare ovunque. Controlli tutta l'interfaccia utente circostante. Limitato. Puoi applicare un tema al colore della barra degli strumenti e aggiungere alcune azioni personalizzate.
Dati e sessioni In sandbox. Non condivide cookie o accessi con il browser principale dell'utente. Condivisi. Utilizza la sessione del browser predefinito dell'utente, inclusi cookie e 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. Limitato. Puoi utilizzare il metodo window.postMessage() per il passaggio di stringhe di base.
Impegno dello sviluppatore Elevato. Devi gestire personalmente il ciclo di vita, la navigazione e il rendimento. Basso. Puoi implementarlo con poche righe di codice.

WebView

Un WebView è una visualizzazione che rende le pagine web parte integrante del layout dell'app. È potente, ma la sua gestione è un po' più complessa 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 pubblicare 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 Creare app web in WebView.

Perché scegliere WebView

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

  • App ibride: stai creando un'app in cui i contenuti web e i componenti nativi (ad es. una barra di navigazione o un Floating Action Button (FAB)) sono affiancati.
  • Contenuti di prime parti: i contenuti web sono una parte interattiva e fondamentale dell'esperienza dell'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 nativa.
  • Analisi approfondite: 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:

  • Rendimento: WebView può richiedere molta memoria. Se non lo gestisci con attenzione, potresti riscontrare problemi di rendimento o errori ANR (App Not Responding).
  • 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 scorre sopra l'app.

Perché scegliere le schede personalizzate

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

  • 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, fornendo al contempo un'esperienza di navigazione completa.
  • Facilità di integrazione: è il modo più semplice per avviare e utilizzare 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 adatte ai flussi di accesso di terze parti (ad es. "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 una maggiore personalizzazione rispetto ad altri. Per saperne di più, consulta 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 tue funzioni Compose, per un'integrazione perfetta.
  • WebView: Compose non ha ancora un elemento componibile WebView nativo, quindi dovrai utilizzare AndroidView per incorporare un WebView standard nel tuo layout.

Risorse aggiuntive

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