Chrome Custom Tabs

BY admin
|

Che cosa sono Chrome Custom Tabs? #

Gli sviluppatori di app devono scegliere quando un utente tocca un URL per avviare un browser o creare il proprio browser in-app utilizzando WebViews.

Entrambe le opzioni presentano sfide: l’avvio del browser è un interruttore di contesto pesante che non è personalizzabile, mentre le visualizzazioni Web non condividono lo stato con il browser e aggiungono un sovraccarico di manutenzione.

Le schede personalizzate di Chrome offrono alle app un maggiore controllo sulla loro esperienza Web e rendono le transizioni tra contenuti nativi e Web più semplici senza dover ricorrere a una WebView.

Le schede personalizzate di Chrome consentono a un’app di personalizzare l’aspetto e l’aspetto di Chrome. Un app può cambiare le cose come:

  • Colore della barra degli strumenti
  • Entra ed esci dalle animazioni
  • Aggiungi azioni personalizzate alla barra degli strumenti di Chrome, al menu di overflow e alla barra degli strumenti inferiore

Le schede personalizzate di Chrome consentono inoltre allo sviluppatore di pre-avviare Chrome e pre-recuperare i contenuti per un caricamento più rapido.

Puoi testarlo ora con il nostro esempio su Github.

Quando dovrei usare Chrome Custom Tabs vs WebView? #

La WebView è una buona soluzione se stai ospitando i tuoi contenuti all’interno della tua app. Se la tua app indirizza le persone agli URL esterni al tuo dominio, ti consigliamo di utilizzare le schede personalizzate di Chrome per questi motivi:

  • Semplice da implementare. Non è necessario creare codice per gestire richieste, autorizzazioni o archivi di cookie.

  • Personalizzazione dell’interfaccia utente:

    • Colore della barra degli strumenti
    • Pulsante azione
    • Voci di menu personalizzate
    • Animazioni in/out personalizzate
    • Barra degli strumenti in basso

  • Consapevolezza di navigazione: il browser fornisce un callback all’applicazione su una navigazione esterna.

  • Sicurezza: il browser utilizza la navigazione sicura di Google per proteggere l’utente e il dispositivo da siti pericolosi.

  • Ottimizzazione delle prestazioni:

    • Pre-riscaldamento del browser in background, evitando di rubare risorse dall’applicazione.
    • Fornire un URL probabile in anticipo al browser, che può eseguire lavori speculativi, accelerando il tempo di caricamento della pagina.

  • Gestione del ciclo di vita: il browser impedisce che l’applicazione venga sfrattata dal sistema mentre si trova sopra di essa, aumentando la sua importanza al livello “in primo piano”.

  • Vaso di cookie condiviso e modello di autorizzazioni in modo che gli utenti non debbano accedere ai siti a cui sono già connessi o concedere nuovamente le autorizzazioni che hanno già concesso.

  • Se l’utente ha attivato Data Saver, ne trarrà comunque beneficio.

  • Completamento automatico sincronizzato tra i dispositivi per un migliore completamento del modulo.

  • Modello di personalizzazione semplice.

  • Ritorna rapidamente all’app con un solo tocco.

  • Si desidera utilizzare le ultime implementazioni del browser sui dispositivi pre-Lollipop (aggiornamento automatico WebView) invece di vecchie WebViews.

Quando sarà disponibile? #

A partire da Chrome 45, Chrome Custom Tabs è ora generalmente disponibile per tutti gli utenti di Chrome, su tutte le versioni Android supportate da Chrome (Jellybean in poi).

Siamo alla ricerca di feedback, domande e suggerimenti su questo progetto, quindi ti invitiamo a presentare problemi su crbug.com e fare domande al nostro account Twitter @ ChromiumDev.

Implementation guide #

Un esempio completo è disponibile su https://github.com/GoogleChrome/custom-tabs-client. Contiene classi riutilizzabili per personalizzare l’interfaccia utente, connettersi al servizio in background e gestire il ciclo di vita dell’applicazione e dell’attività della scheda personalizzata.

Se segui le indicazioni di questa pagina, sarai in grado di creare una grande integrazione.

Il primo passo per un’integrazione di schede personalizzate è aggiungere la libreria di supporto schede personalizzate al progetto. Aprire il file build.gradle e aggiungere la libreria di supporto alla sezione dipendenze.

dependencies {
...
compile 'com.android.support:customtabs:23.3.0'
}

Una volta aggiunta la libreria di supporto al progetto, sono disponibili due set di possibili personalizzazioni:

  • Personalizzazione dell’interfaccia utente e interazione con le schede personalizzate.
  • Rendere il caricamento della pagina più veloce e mantenere viva l’applicazione.

Le personalizzazioni dell’interfaccia utente vengono eseguite utilizzando le classi CustomTabsIntent e CustomTabsIntent.Builder; i miglioramenti delle prestazioni vengono raggiunti utilizzando CustomTabsClient per connettersi al servizio Schede personalizzate, warm-up Chrome e far sapere quali URL verranno aperti.

Apertura di una scheda personalizzata di Chrome #

Configura il colore della barra degli indirizzi #

Uno degli aspetti più importanti (e più semplici da implementare) delle schede personalizzate di Chrome è la possibilità di modificare il colore della barra degli indirizzi in modo che sia coerente con il tema della tua app.

// Changes the background color for the omnibox. colorInt is an int
// that specifies a Color.
builder.setToolbarColor(colorInt);

Configura un pulsante di azione personalizzato #

Come sviluppatore della tua app, hai il pieno controllo sul pulsante di azione che viene presentato agli utenti all’interno della scheda Chrome.

Nella maggior parte dei casi, questa sarà un’azione primaria come la Condivisione o un’altra attività comune che gli utenti eseguiranno.

Il pulsante di azione è rappresentato come un pacchetto con un’icona del pulsante di azione e un pendingIntent che verrà chiamato da Chrome quando l’utente preme il pulsante di azione. L’icona è currenlty 24dp in altezza e 24-48 dp in larghezza.

Configura un menu personalizzato #

Il browser Chrome dispone di un menu completo di azioni che gli utenti eseguiranno frequentemente all’interno di un browser, tuttavia potrebbero non essere rilevanti per il contesto dell’applicazione.

Come sviluppatore, puoi aggiungere e personalizzare fino a cinque voci di menu che appariranno tra la riga dell’icona e gli elementi del piede.

La voce di menu viene aggiunta chiamando CustomTabsIntent.Builder#addMenuItem con title e pendingIntent che Chrome chiamerà per tuo conto quando l’utente tocca l’elemento viene passato come parametri.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Configura animazioni di ingresso e uscita personalizzate #

Molte applicazioni Android utilizzano animazioni di ingresso e uscita personalizzate durante la transizione tra le attività su Android. Chrome Schede personalizzate non è diverso, è possibile modificare l’ingresso e l’uscita (quando l’utente preme indietro) animazioni per mantenerli coerenti con il resto della vostra applicazione.

Riscalda Chrome per caricare le pagine più velocemente #

Per impostazione predefinita, quando viene chiamato CustomTabsIntent#launchUrl, verrà attivato Chrome e avviato l’URL. Ciò può richiedere tempo prezioso e influire sulla percezione della levigatezza.

Crediamo che gli utenti richiedano un’esperienza quasi istantanea, quindi abbiamo fornito un Servizio in Chrome a cui la tua app può connettersi e dire a Chrome di riscaldare il browser e i componenti nativi. Stiamo anche sperimentando con la possibilità per voi, lo sviluppatore di dire Chrome il probabile insieme di pagine web che l’utente visiterà. Chrome sarà quindi in grado di eseguire:

  • Pre-risoluzione DNS del dominio principale
  • Pre-risoluzione DNS delle risorse secondarie più probabili
  • Pre-connessione alla destinazione inclusa la negoziazione HTTPS/TLS.

Il processo per il riscaldamento di Chrome è il seguente:

  • Utilizzare CustomTabsClient#bindCustomTabsService per connettersi al servizio.
  • Una volta che il servizio è collegato, chiamare CustomTabsClient#warmup per avviare Chrome dietro le quinte.
  • Chiama CustomTabsClient#newSession per creare una nuova sessione. Questa sessione viene utilizzata per tutte le richieste all’API.
  • Facoltativamente, allegare un CustomTabsCallback come parametro quando si crea una nuova sessione, in modo da sapere che è stata caricata una pagina.
  • Indica a Chrome quali pagine è probabile che l’utente carichi con CustomTabsSession#mayLaunchUrl.
  • Chiama il costruttore CustomTabsIntent.Builder passando il CustomTabsSession creato come parametro.

Connessione al servizio Chrome #

Il metodo CustomTabsClient#bindCustomTabsService elimina la complessità della connessione al servizio Schede personalizzate.

Crea una classe che estende CustomTabsServiceConnection e usa onCustomTabsServiceConnected per ottenere un’istanza di CustomTabsClient. Questa istanza sarà necessaria nei passaggi successivi.

Riscaldare il processo del browser#

boolean warmup(long flags)

Riscalda il processo del browser e carica le librerie native. Il riscaldamento è asincrono, il valore restituito indica se la richiesta è stata accettata. Anche più chiamate riuscite restituiranno true.

Restituisce true per il successo.

Crea una nuova sessione di schede#

boolean newSession(CustomTabsCallback callback)

La sessione viene utilizzata nelle chiamate successive per collegare la chiamata mayLaunchUrl, il CustomTabsIntent e la scheda generata tra loro. Il callback fornito qui è associato alla sessione creata. Tutti gli aggiornamenti per la sessione creata (vedi Callback schede personalizzate di seguito) vengono ricevuti anche tramite questa callback. Restituisce se una sessione è stata creata correttamente. Più chiamate con lo stesso CustomTabsCallback o un valore null restituiranno false.

Dì a Chrome quale URL è probabile che l’utente apra #

boolean mayLaunchUrl(Uri url, Bundle extras, List otherLikelyBundles)

Questo metodo CustomTabsSession indica al browser una probabile navigazione futura su un URL. Il metodo warmup() dovrebbe essere chiamato prima come best practice. L’URL più probabile deve essere specificato prima. Facoltativamente, è possibile fornire un elenco di altri URL probabili. Sono trattati come meno probabili del primo e devono essere ordinati in ordine di priorità decrescente. Questi URL aggiuntivi possono essere ignorati. Tutte le chiamate precedenti a questo metodo verranno depriorizzate. Restituisce se l’operazione è stata completata correttamente.

Schede personalizzate Connessione Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

Verrà chiamato quando si verifica un evento di navigazione nella scheda personalizzata. Il ‘navigationEvent int’ è uno dei 6 valori che definisce lo stato della pagina è in. Vedi sotto per ulteriori informazioni.

Cosa succede se l’utente non ha una versione recente di Chrome installata? #

Schede personalizzate utilizza un intento ACTION_VIEW con extra chiave per personalizzare l’interfaccia utente. Ciò significa che per impostazione predefinita la pagina saràapri nel browser di sistema o nel browser predefinito dell’utente.

Se l’utente ha installato Chrome ed è il browser predefinito, raccoglierà automaticamente gli EXTRA e presenterà un’interfaccia utente personalizzata. È anche possibile che un altro browser utilizzi gli extra Intent per fornire un’interfaccia personalizzata simile.

Come posso verificare se Chrome supporta le schede personalizzate Chrome? #

Tutte le versioni di Chrome che supportano le schede personalizzate di Chrome espongono un servizio. Per verificare se Chrome supporta schede personalizzate, provare a associare al servizio. Se riesce, le schede personalizzate possono essere utilizzate in modo sicuro.

Best practice #

Dal lancio di Chrome Custom Tabs, abbiamo visto varie implementazioni con diversi livelli di qualità. Questa sezione descrive una serie di best practice che abbiamo trovato per creare una buona integrazione.

Connettersi al servizio Schede personalizzate e chiamare warmup () #

È possibile salvare fino a 700 ms quando si apre un collegamento con le schede personalizzate collegandosi al servizio e precaricando Chrome.

Connettersi al servizio Schede personalizzate sul metodo onStart() delle attività da cui si prevede di avviare una scheda personalizzata. Al momento della connessione, chiamare warmup ().

Il caricamento avviene come un processo a bassa priorità, il che significa che non avrà alcun impatto negativo sulle prestazioni sull’applicazione, ma darà un grande aumento delle prestazioni durante il caricamento di un collegamento.

Pre-render content #

Il pre-rendering renderà il contenuto esterno aperto all’istante. Quindi, come se il tuo utente avesse almeno il 50% di probabilità di fare clic sul link, chiama il metodo mayLaunchUrl ().

Chiamare mayLaunchUrl() renderà le schede personalizzate pre-recuperare la pagina principale con il contenuto di supporto e pre-render. Questo darà la massima velocità fino al processo di caricamento della pagina, ma viene fornito con una rete e il costo della batteria.

Custom Tabs è intelligente e sa se l’utente sta utilizzando il telefono su una rete misurata o se si tratta di un dispositivo di fascia bassa e il pre-rendering avrà un effetto negativo sulle prestazioni complessive del dispositivo e non pre-fetch o pre-render su quegli scenari. Quindi, non è necessario ottimizzare la tua applicazione per questi casi.

Fornire un fallback per quando le schede personalizzate non sono installate #

Sebbene le schede personalizzate siano disponibili per la maggior parte degli utenti, ci sono alcuni scenari in cui un browser che supporta schede personalizzate non è installato sul dispositivo o il dispositivo non supporta una versione del browser con schede personalizzate abilitate.

Assicurati di fornire un fallback che fornisca una buona esperienza utente aprendo il browser predefinito o utilizzando la tua implementazione WebView.

Aggiungi la tua app come referrer #

Di solito è molto importante per i siti Web monitorare da dove proviene il loro traffico. Assicurati di far sapere loro che stai inviando loro utenti impostando il referrer quando avvii la tua scheda personalizzata

intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse(Intent.URI_ANDROID_APP_SCHEME + "//" + context.getPackageName()));

Aggiungi animazioni personalizzate #

Le animazioni personalizzate renderanno più agevole la transizione dall’applicazione al contenuto web. Assicurati che l’animazione di fine sia il contrario dell’animazione di inizio, in quanto aiuterà l’utente a capire che sta tornando al contenuto in cui è iniziata la navigazione.

La scelta di un’icona per il pulsante di azione #

L’aggiunta di un pulsante di azione farà sì che gli utenti si impegnino di più con le funzionalità dell’app. Ma, se non c’è una buona icona per rappresentare l’azione che il tuo pulsante di azione eseguirà, crea una bitmap con un testo che descrive l’azione.

Ricorda che la dimensione massima per la bitmap è 24dp altezza x 48dp larghezza.

Preparazione per altri browser #

Ricorda che l’utente può avere più di un browser installato che supporta schede personalizzate. Se c’è più di un browser che supporta Schede Personalizzate e nessuno se li è il browser preferito, chiedere all’utente di come vuole aprire il link

Consenti all’utente di scegliere di Schede Personalizzate #

Aggiungere un’opzione per l’applicazione per l’utente di aprire i link nel browser predefinito invece di utilizzare una Scheda Personalizzata. Questo è particolarmente importante se l’applicazione ha aperto il collegamento utilizzando il browser prima di aggiungere il supporto per le schede personalizzate.

Lascia che le applicazioni native gestiscano il contenuto #

Alcuni URL possono essere gestiti da applicazioni native. Se l’utente ha installato l’app Twitter e fa clic su un link a un tweet. Si aspetta che l’applicazione Twitter lo gestirà.

Prima di aprire un URL dalla tua applicazione, controlla se è disponibile un’alternativa nativa e usala.

Personalizza il colore della barra degli strumenti #

Personalizza con il colore primario dell’applicazione se vuoi che l’utente senta che il contenuto fa parte dell’applicazione.

Se vuoi chiarire all’utente che ha lasciato l’applicazione, non personalizzare affatto il colore.

Aggiungi un’azione di condivisione #

Assicurati di aggiungere l’azione di condivisione al menu di overflow, poiché gli utenti si aspettano di poter condividere il link al contenuto che stanno vedendo nella maggior parte dei casi d’uso e le schede personalizzate non ne aggiungono una per impostazione predefinita.

Personalizza il pulsante chiudi #

Personalizza il pulsante Chiudi per far sì che la scheda personalizzata si senta parte dell’applicazione.

Se vuoi che l’utente si senta come se le schede personalizzate fossero una finestra di dialogo modale, usa il pulsante “X” predefinito. Se si desidera che l’utente ritenga che la scheda personalizzata faccia parte del flusso dell’applicazione, utilizzare la freccia indietro.

Gestisci collegamenti interni #

Quando intercetti i clic sui collegamenti generati da Android:autoLink o sovrascrivi i clic sui collegamenti sulle visualizzazioni Web, assicurati che l’applicazione gestisca i collegamenti interni e le schede personalizzate gestiscano quelle esterne.

Gestire più clic #

Se è necessario eseguire qualsiasi elaborazione tra l’utente che fa clic su un collegamento e apre la scheda personalizzata, assicurarsi che funzioni in meno di 100 ms. Altrimenti la gente vedrà la mancanza di risposta e potrebbe provare a fare clic più volte sul collegamento.

Se non è possibile evitare il ritardo, assicurarsi che l’applicazione sia preparata per quando un utente fa clic più volte sullo stesso link e non apre una scheda personalizzata più volte.

API di basso livello #

Sebbene il metodo consigliato per integrare l’applicazione con Schede personalizzate utilizzi la libreria di supporto schede personalizzate, è disponibile anche un’implementazione di basso livello.

L’implementazione completa della libreria di supporto è disponibile su Github e può essere utilizzata come punto di partenza. Contiene anche i file AIDL necessari per connettersi al servizio, in quanto quelli contenuti nel repository Chromium non sono direttamente utilizzabili con Android Studio.

Nozioni di base per l’avvio di schede personalizzate utilizzando l’API di basso livello #

Aggiunta di personalizzazioni dell’interfaccia utente #

Le personalizzazioni dell’interfaccia utente sono incluse aggiungendo Extra all’intento ACTION_VIEW. Un elenco completo delle chiavi extra utilizzate per personalizzare l’interfaccia utente può essere trovato sui documenti CustomTabsIntent. Segue un esempio su come aggiungere un colore della barra degli strumenti personalizzato:

Connessione al servizio Schede personalizzate #

Il servizio Schede personalizzate può essere utilizzato allo stesso modo di altri servizi Android. L’interfaccia viene creata con AIDL e crea automaticamente una classe di servizio proxy per te.

Utilizzare i metodi del servizio proxy per il warm-up, creare sessioni di pre-fetch

Link Utili #

  • Github Demo
  • Chrome Schede Personalizzate su StackOverflow

FAQ #

  • Quando questo sarà disponibile sul canale stabile?
    • Le schede personalizzate di Chrome sono disponibili a partire da Chrome 45.
  • Dove posso fare domande?
    • Tag Stackoverflow: chrome-custom-tabs