Panoramica delle schede personalizzate Android

Le schede personalizzate sono una funzionalità dei browser Android che offre agli sviluppatori di app un modo per aggiungere un'esperienza di navigazione personalizzata direttamente all'interno della loro app.

Il caricamento di contenuti web fa parte delle app mobile sin dagli esordi degli smartphone, ma opzioni meno recenti possono presentare difficoltà agli sviluppatori. L'avvio del browser effettivo comporta un cambio di contesto elevato per gli utenti e non è personalizzabile, mentre le WebView non supportano tutte le funzionalità della piattaforma web, non condividono lo stato con il browser e aggiungono un overhead di manutenzione.

Le schede personalizzate consentono agli utenti di rimanere nell'app durante la navigazione, aumentando il coinvolgimento e riducendo il rischio che abbandonino l'app. Lo fanno grazie al browser preferito dell'utente e condividono automaticamente lo stato e le funzionalità offerte dal browser. Non è necessario scrivere codice personalizzato per gestire richieste, concessioni di autorizzazioni o cookie store.

Cosa possono fare le schede personalizzate?

Se utilizzi una scheda personalizzata, i contenuti web vengono caricati in qualsiasi motore di rendering supportato dal browser preferito dell'utente. Qui sono disponibili tutte le API o le funzionalità della piattaforma web, che sono disponibili anche nella scheda personalizzata. La sessione di navigazione, le password salvate, i metodi di pagamento e gli indirizzi vengono visualizzati come accade già.

Cosa posso personalizzare in una scheda personalizzata?

Molto. Le schede personalizzate ti consentono di avere un controllo granulare su molti aspetti del browser Chrome e dell'esperienza utente. All'interno dell'app, puoi avviare una scheda personalizzata utilizzando un intent. Quando viene chiamato questo Intent, puoi aggiungere una serie di attributi al CustomTabIntent per ottenere l'esperienza esatta che desideri. Di seguito sono elencate alcune personalizzazioni che puoi aggiungere:

  • Animazioni di entrata e uscita personalizzate in linea con il resto dell'app
  • Modificare il colore della barra degli strumenti in modo che corrisponda al branding dell'app
  • Coerenza dei colori che può essere mantenuta nell'app anche se si passa dal tema chiaro a quello scuro e viceversa
  • Azioni e voci personalizzate nella barra degli strumenti e nei menu del browser
  • Controlla l'altezza di lancio della scheda personalizzata, ad esempio per lo streaming dei video mentre interagisci con il tuo negozio web

Inoltre, gli utenti possono ridurre a icona una scheda personalizzata per interagire con l'app sottostante e ripristinarla in qualsiasi momento senza perdere i progressi e riprendere il loro percorso. In questo modo, gli utenti hanno un'alternativa alla chiusura della scheda personalizzata e possono passare senza problemi dal web all'app nativa e viceversa. La funzionalità è attiva per impostazione predefinita per le schede personalizzate.

È lontano da tutto. Le schede personalizzate sono molto efficaci e in fase di sviluppo. Ogni browser deve aggiungere il supporto di queste funzionalità non appena diventano disponibili. Sebbene quasi tutte abbiano un certo livello di supporto, è importante sapere cosa potrebbe o non potrebbe essere disponibile nei browser degli utenti. Consulta la tabella di confronto delle funzionalità per verificare rapidamente la disponibilità delle diverse funzionalità nei browser Android più diffusi.

Puoi testare subito questa funzionalità con il nostro esempio su GitHub.

Quando è consigliabile utilizzare le schede personalizzate?

Non esiste un solo modo "corretto" per caricare contenuti web. In alcune situazioni, WebView sarà la tecnologia giusta da utilizzare. Ad esempio, se ospithi esclusivamente i tuoi contenuti all'interno della tua app o se devi iniettare JavaScript direttamente dalla tua app. Se la tua app indirizza gli utenti a URL esterni ai domini, lo stato condiviso integrato in Custom Tabs è probabilmente una scelta migliore. Le schede personalizzate offrono altri punti di forza:

  1. Sicurezza: le schede personalizzate utilizzano Navigazione sicura di Google per proteggere l'utente e il dispositivo da siti pericolosi.
  2. Ottimizzazione delle prestazioni:
    1. Preparazione del browser in background, evitando di rubare risorse dall'applicazione.
    2. Velocizza il tempo di caricamento della pagina caricando in modo speculativo gli URL in anticipo.
  3. Gestione del ciclo di vita: le app che avviano una scheda personalizzata non verranno espulse dal sistema durante l'utilizzo delle schede. La loro importanza viene elevata al livello "primo piano".
  4. Modello di cookie jar e autorizzazioni condivisi per consentire agli utenti di non dover accedere ai siti a cui sono già collegati o di concedere nuovamente le autorizzazioni che hanno già concesso.
  5. Le funzionalità del browser, come la compilazione automatica per una migliore compilazione dei moduli, sono disponibili immediatamente.
  6. Gli utenti possono tornare all'app con un pulsante Indietro integrato.

Schede personalizzate e Attività web attendibile

Le Attività web attendibili estendono il protocollo Custom Tabs e condividono la maggior parte dei suoi vantaggi. Tuttavia, anziché fornire un'interfaccia utente personalizzata, consente agli sviluppatori di aprire una scheda del browser senza alcuna interfaccia utente. È consigliato per gli sviluppatori che vogliono aprire la propria app web progressiva a schermo intero all'interno della propria app per Android.

Dove sono disponibili le schede personalizzate?

Schede personalizzate è una funzionalità supportata dai browser sulla piattaforma Android. È stato inizialmente introdotto da Chrome, nella versione 45. Il protocollo è supportato dalla maggior parte dei browser Android.

Siamo alla ricerca di feedback, domande e suggerimenti su questo progetto, quindi ti invitiamo a segnalare i problemi su crbug.com e a porre domande su Twitter a @ChromiumDev.

Inizia

Oltre alla demo GitHub, sono disponibili diverse guide per iniziare a utilizzare le schede personalizzate.

Per domande, controlla il tag chrome-custom-tabs su StackOverflow.