Le schede personalizzate sono una funzionalità dei browser Android che consente agli sviluppatori di app di aggiungere un'esperienza di navigazione personalizzata direttamente nella loro app.
Il caricamento di contenuti web fa parte delle app mobile sin dagli esordi degli smartphone, ma opzioni meno recenti possono rappresentare una sfida per gli sviluppatori. L'avvio del browser effettivo è un passaggio di contesto pesante per gli utenti che non è personalizzabile, mentre i componenti WebView non supportano tutte le funzionalità della piattaforma web, non condividere lo stato con il browser e comportare un overhead per la manutenzione.
Le schede personalizzate offrono un'esperienza utente migliore rispetto all'apertura di un browser esterno. Consentono agli utenti di rimanere all'interno dell'app durante la navigazione, aumentando il coinvolgimento e riducendo il rischio che gli utenti abbandonino l'app. A questo scopo, sono basati direttamente sul browser preferito dell'utente e condividono automaticamente lo stato e le funzionalità offerte. Non è necessario scrivere codice personalizzato per gestire richieste, concessioni di autorizzazioni o archivi di cookie.
Che cosa possono fare le schede personalizzate?
Utilizzando una Scheda personalizzata, i tuoi contenuti web verranno caricati in qualsiasi motore di rendering dotato del browser preferito dall'utente. Qualsiasi funzionalità dell'API o della piattaforma web è disponibile nella scheda personalizzata. La sessione di navigazione, le password salvate, i metodi di pagamento e gli indirizzi verranno visualizzati come sempre.
Che cosa posso personalizzare in una Scheda personalizzata?
Molto. Le schede personalizzate ti offrono un controllo granulare su gran parte del browser Chrome e dell'esperienza utente. Nell'app, avvii una scheda personalizzata utilizzando un intent. Quando questo intent viene chiamato, puoi aggiungere una serie di attributi a CustomTabIntent per ottenere l'esperienza esatta che ti interessa. Alcune personalizzazioni che puoi aggiungere sono elencate qui.
Animazioni di entrata e uscita personalizzate per abbinarsi al resto dell'app
Modificare il colore della barra degli strumenti in modo che corrisponda al branding dell'app.
Coerenza dei colori perfetta per la tua app, anche se passa dal tema chiaro a quello scuro.
Azioni e voci personalizzate nella barra degli strumenti e nei menu del browser.
Controlla l'altezza di avvio della Scheda personalizzata per consentire, ad esempio, lo streaming dei tuoi video durante l'interazione con il tuo web store.
Gli utenti possono ridurre a icona una scheda personalizzata per interagire con l'app sottostante e ripristinarla in qualsiasi momento senza perdere i progressi necessari per riprendere il percorso. In questo modo gli utenti hanno un'alternativa alla chiusura della scheda personalizzata e possono svolgere senza problemi il multitasking tra il web e l'app nativa. La funzionalità è attiva per impostazione predefinita nelle schede personalizzate a partire da Chrome 122 Beta.
Non è tutto. Le schede personalizzate sono molto potenti e in fase di sviluppo attivo. Ogni browser deve aggiungere il supporto per queste funzionalità non appena diventano disponibili. Sebbene quasi tutti offrano un certo livello di supporto, è importante sapere quali contenuti possono essere disponibili o meno nei browser degli utenti. Consulta la tabella di confronto delle funzionalità per verificare rapidamente la disponibilità delle diverse funzionalità nei browser Android più diffusi.
Ora puoi testare questa funzionalità con il nostro esempio su GitHub.
Quando devo utilizzare le schede personalizzate?
Non esiste un unico modo "corretto" per caricare i contenuti web. In certe situazioni, WebView è la tecnologia giusta da usare. Ad esempio, se ospiti esclusivamente i tuoi contenuti all'interno della tua app o se devi inserire codice JavaScript direttamente dall'app. Se la tua app indirizza gli utenti a URL esterni ai domini, lo stato condiviso incorporato nelle schede personalizzate indica che probabilmente rappresentano una scelta migliore. Altri punti di forza delle schede personalizzate includono:
- Sicurezza: le schede personalizzate utilizzano Navigazione sicura di Google per proteggere l'utente e il dispositivo da siti pericolosi.
- Ottimizzazione delle prestazioni:
- Preparazione del browser in background senza sottrarre risorse all'applicazione.
- Velocizza il tempo di caricamento della pagina caricando in anticipo gli URL in modo speculativo.
- Gestione del ciclo di vita: le app che avviano una scheda personalizzata non vengono rimosse dal sistema durante l'utilizzo delle schede; la loro importanza viene aumentata al livello "in primo piano".
- Modello di autorizzazioni e jar dei cookie condivisi in modo che gli utenti non debbano accedere ai siti a cui sono già collegati o concedere nuovamente le autorizzazioni che hanno già concesso.
- Le funzionalità del browser come Risparmio dati, se attivate, vengono condivise, così i contenuti vengono caricati in modo più rapido ed economico.
- Completamento automatico sincronizzato su tutti i dispositivi per una migliore compilazione del modulo.
- Gli utenti possono tornare all'app con un pulsante Indietro integrato.
Schede personalizzate e attività web attendibile
Le attività web attendibili estendono il protocollo delle schede personalizzate e ne presentano la maggior parte. Tuttavia, invece di fornire un'interfaccia utente personalizzata, consente agli sviluppatori di aprire una scheda del browser senza alcuna UI. È consigliata 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?
Le schede personalizzate sono una funzionalità supportata dai browser sulla piattaforma Android. È stata originariamente introdotta da Chrome, nella versione 45. Il protocollo è supportato dalla maggior parte dei browser Android.
Vorremmo ricevere feedback, domande e suggerimenti su questo progetto, pertanto ti invitiamo a segnalare problemi su crbug.com e a porre domande su Twitter @ChromiumDev.
Inizia
Oltre alla demo di GitHub, sono disponibili diverse guide per iniziare a utilizzare le schede personalizzate.
- Come iniziare
- Personalizzazione dell'interfaccia utente
- Aggiungere interattività personalizzata
- Preparazione e precaricamento mediante il servizio Schede personalizzate
- Multitasking con schede personalizzate parziali
- Misurare il coinvolgimento degli utenti
Per eventuali domande, controlla il tag chrome-custom-tabs su StackOverflow.