file personalizate Chrome

BY admin
|

ce sunt filele personalizate Chrome? #

dezvoltatorii de aplicații se confruntă cu o alegere atunci când un utilizator atinge o adresă URL pentru a lansa un browser sau pentru a-și construi propriul browser în aplicație folosind Vizualizări web.

ambele opțiuni prezintă provocări—lansarea browserului este un comutator de context greu care nu este personalizabil, în timp ce vizualizările web nu partajează starea cu browserul și adaugă cheltuieli de întreținere.

filele personalizate Chrome oferă aplicațiilor mai mult control asupra experienței lor web și fac tranzițiile între conținutul nativ și cel web mai ușoare, fără a fi nevoie să recurgeți la o vizualizare Web.

filele personalizate Chrome permit unei aplicații să personalizeze modul în care arată și se simte Chrome. O aplicație poate schimba lucruri precum:

  • culoarea barei de instrumente
  • introduceți și ieșiți din animații
  • adăugați acțiuni personalizate în bara de instrumente Chrome, meniul overflow și bara de instrumente de jos

filele personalizate Chrome permit, de asemenea, dezvoltatorului să pre-pornească Chrome și să pre-aducă conținut pentru o încărcare mai rapidă.

puteți testa acest lucru acum cu eșantionul nostru pe Github.

când ar trebui să folosesc file personalizate Chrome vs WebView? #

WebView este o soluție bună dacă găzduiți propriul conținut în interiorul aplicației. Dacă aplicația direcționează utilizatorii către adrese URL din afara domeniului dvs., vă recomandăm să utilizați filele personalizate Chrome din aceste motive:

  • simplu de implementat. Nu este nevoie să creați cod pentru a gestiona cererile, permisiunile sau magazinele de cookie-uri.

  • personalizare UI:

    • culoarea barei de instrumente
    • buton de acțiune
    • elemente de meniu personalizate
    • animații personalizate in/out
    • bara de instrumente de jos

  • navigare awareness: browser-ul oferă un apel invers la aplicarea pe o navigare externă.

  • securitate: browserul folosește Navigarea sigură Google pentru a proteja utilizatorul și dispozitivul de site-uri periculoase.

  • optimizarea performanței:

    • pre-încălzirea browserului în fundal, evitând în același timp furtul resurselor din aplicație.
    • furnizarea unui URL probabil în avans către browser, care poate efectua lucrări speculative, accelerând timpul de încărcare a paginii.

  • Gestionarea ciclului de viață: browserul împiedică evacuarea aplicației de către sistem în timp ce se află pe partea de sus a acesteia, ridicând importanța acesteia la nivelul „prim-plan”.

  • Shared Cookie jar și permisiuni model, astfel încât utilizatorii nu trebuie să vă conectați la site-uri sunt deja conectate la, sau re-acorda permisiunile pe care le-au acordat deja.

  • dacă utilizatorul a activat Data Saver, acesta va beneficia în continuare de acesta.

  • Autocomplete sincronizate între dispozitive pentru o mai bună completare formă.

  • model simplu de personalizare.

  • reveniți rapid la aplicație cu o singură atingere.

  • doriți să utilizați cele mai recente implementări de browser pe dispozitive pre-Lollipop (auto actualizarea WebView) în loc de WebViews mai vechi.

când va fi disponibil? #

începând cu Chrome 45, filele personalizate Chrome sunt acum disponibile în general tuturor utilizatorilor Chrome, pe toate versiunile Android acceptate de Chrome (Jellybean începând).

căutăm feedback, întrebări și sugestii cu privire la acest proiect, așa că vă încurajăm să depuneți probleme pe crbug.com și puneți întrebări contului nostru Twitter @ ChromiumDev.

Ghid de implementare #

un exemplu complet este disponibil la https://github.com/GoogleChrome/custom-tabs-client. Acesta conține clase reutilizabile pentru a personaliza UI, conectați la serviciul de fundal, și se ocupe de ciclul de viață al aplicației și activitatea fila Personalizat.

dacă urmați instrucțiunile din această pagină, veți putea crea o integrare excelentă.

primul pas pentru integrarea filelor personalizate este adăugarea Bibliotecii de asistență pentru filele personalizate la proiectul dvs. Deschideți fișierul build.gradle și adăugați biblioteca de asistență la secțiunea dependență.

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

odată ce biblioteca de asistență este adăugată la proiectul dvs., există două seturi de personalizări posibile:

  • personalizarea UI și interacțiunea cu filele personalizate.
  • făcând încărcarea paginii mai rapidă și menținând aplicația în viață.

personalizările UI se fac utilizând clasele CustomTabsIntent și CustomTabsIntent.Builder; îmbunătățirile de performanță se realizează utilizând CustomTabsClient pentru a vă conecta la Serviciul file personalizate, încălziți Chrome și anunțați-l Ce adrese URL vor fi deschise.

deschiderea unei file personalizate Chrome #

configurați culoarea barei de adrese #

unul dintre cele mai importante (și mai simple de implementat) aspecte ale filelor personalizate Chrome este posibilitatea de a schimba culoarea barei de adrese pentru a fi în concordanță cu tema aplicației.

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

configurați un buton de acțiune personalizat#

în calitate de dezvoltator al aplicației dvs., aveți control deplin asupra butonului de acțiune care este prezentat utilizatorilor dvs. în fila Chrome.

în majoritatea cazurilor, aceasta va fi o acțiune principală, cum ar fi partajarea sau o altă activitate comună pe care utilizatorii dvs. o vor efectua.

Butonul acțiune este reprezentat ca un pachet cu o pictogramă a butonului acțiune și un pendingIntent care va fi apelat de Chrome atunci când utilizatorul dvs. atinge butonul Acțiune. Pictograma este currenlty 24dp în înălțime și 24-48 dp în lățime.

configurați un meniu personalizat#

browserul Chrome are un meniu cuprinzător de acțiuni pe care utilizatorii le vor efectua frecvent în interiorul unui browser, însă este posibil ca acestea să nu fie relevante pentru contextul aplicației dvs.

ca dezvoltator, puteți adăuga și personaliza până la cinci elemente de meniu care vor apărea între rândul pictogramei și elementele piciorului.

elementul de meniu este adăugat apelând CustomTabsIntent.Builder#addMenuItem cu titlu și un pendingIntent pe care Chrome îl va apela în numele dvs. atunci când utilizatorul atinge elementul sunt transmise ca parametri.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

configurați animațiile personalizate de intrare și ieșire #

multe aplicații Android utilizează animații personalizate de intrare și ieșire atunci când tranziția între activitățile de pe Android. Filele personalizate Chrome nu diferă, puteți schimba animațiile de intrare și ieșire (când utilizatorul apasă înapoi) pentru a le menține în concordanță cu restul aplicației.

încălziți Chrome pentru a face paginile să se încarce mai repede #

în mod implicit, când se apelează CustomTabsIntent#launchUrl, acesta va roti Chrome și va lansa adresa URL. Acest lucru poate dura timp prețios și impact asupra percepției netezimii.

credem că utilizatorii solicită o experiență aproape instantanee, așa că am furnizat un serviciu în Chrome la care aplicația dvs. se poate conecta și îi poate spune lui Chrome să încălzească browserul și componentele native. De asemenea, experimentăm capacitatea pentru dvs., dezvoltatorul de a spune Chrome setul probabil de pagini web pe care utilizatorul le va vizita. Chrome va putea apoi să efectueze:

  • pre-rezoluția DNS a domeniului principal
  • pre-rezoluția DNS a celor mai probabile sub-resurse
  • pre-conectarea la destinație, inclusiv negocierea HTTPS/TLS.

procesul de încălzire a cromului este următorul:

  • utilizați CustomTabsClient#bindCustomTabsService pentru a vă conecta la serviciu.
  • odată ce serviciul este conectat, apelați CustomTabsClient#warmup pentru a porni Chrome În culise.
  • apelați CustomTabsClient#newSession pentru a crea o nouă sesiune. Această sesiune este utilizată pentru toate solicitările către API.
  • opțional, atașați un CustomTabsCallback ca parametru atunci când creați o nouă sesiune, astfel încât să știți că o pagină a fost încărcată.
  • spuneți Chrome ce pagini este probabil să încarce utilizatorul cu CustomTabsSession#mayLaunchUrl.
  • apelați constructorul CustomTabsIntent.Builder care trece CustomTabsSession creat ca parametru.

Conectați-vă la Serviciul Chrome #

metoda CustomTabsClient#bindCustomTabsService elimină complexitatea conectării la Serviciul file personalizate.

creați o clasă care extinde CustomTabsServiceConnection și utilizați onCustomTabsServiceConnected pentru a obține o instanță a CustomTabsClient. Această instanță va fi necesară în următorii pași.

încălziți procesul browserului #

boolean warmup(long flags)

încălzește procesul browserului și încarcă bibliotecile native. Warmup este asincron, valoarea returnată indică dacă cererea a fost acceptată. Mai multe apeluri de succes va reveni, de asemenea, adevărat.

returnează true pentru succes.

creați o nouă sesiune de file#

boolean newSession(CustomTabsCallback callback)

sesiunea este utilizată în apelurile ulterioare pentru a lega apelul mayLaunchUrl, CustomTabsIntent și fila generată între ele. Apelul invers furnizat aici este asociat cu sesiunea creată. Orice actualizări pentru sesiunea creată (a se vedea file personalizate Callback de mai jos) este, de asemenea, primit prin acest apel invers. Returnează dacă o sesiune a fost creată cu succes. Mai multe apeluri cu același CustomTabsCallback sau o valoare nulă va reveni false.

spune Chrome ce URL-ul utilizatorului este probabil să deschidă #

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

această metodă CustomTabsSession spune browser-ul de o navigare viitoare probabil la o adresă URL. Metoda warmup() ar trebui să fie numită mai întâi ca o bună practică. Adresa URL cea mai probabilă trebuie specificată mai întâi. Opțional, poate fi furnizată o listă cu alte adrese URL probabile. Acestea sunt tratate ca fiind mai puțin probabile decât prima și trebuie sortate în ordinea priorității descrescătoare. Aceste adrese URL suplimentare pot fi ignorate. Toate apelurile anterioare la această metodă vor fi deprioritizate. Returnează dacă operațiunea a fost finalizată cu succes.

file personalizate conexiune apel invers #

void onNavigationEvent(int navigationEvent, Bundle extras)

va fi apelat atunci când un eveniment de navigare se întâmplă în fila Personalizat. ‘NavigationEvent int’ este una dintre cele 6 valori care definesc starea paginii în care se află. A se vedea mai jos pentru mai multe informații.

ce se întâmplă dacă utilizatorul nu are instalată o versiune recentă de Chrome? #

file personalizate utilizează o intenție ACTION_VIEW cu Extras cheie pentru a personaliza UI. Aceasta înseamnă că, în mod implicit, pagina va fideschis în browserul de sistem sau în browserul implicit al utilizatorului.

dacă utilizatorul are instalat Chrome și este browserul implicit, acesta va prelua automat suplimentele și va prezenta o interfață personalizată. De asemenea, este posibil ca un alt browser să utilizeze suplimentele de intenție pentru a oferi o interfață personalizată similară.

Cum pot verifica dacă Chrome acceptă filele personalizate Chrome? #

toate versiunile de Chrome care acceptă filele personalizate Chrome expun un serviciu. Pentru a verifica dacă Chrome acceptă file personalizate, Încercați să vă legați de serviciu. Dacă reușește, atunci filele personalizate pot fi utilizate în siguranță.

cele mai bune practici #

de la lansarea filelor personalizate Chrome, am văzut diverse implementări cu diferite niveluri de calitate. Această secțiune descrie un set de bune practici pe care le-am găsit pentru a crea o bună integrare.

Conectați-vă la Serviciul file personalizate și apelați warmup() #

puteți salva până la 700 ms când deschideți un link cu filele personalizate conectându-vă la serviciu și preîncărcând Chrome.

Conectați-vă la Serviciul file personalizate din metoda onStart() a activităților din care intenționați să lansați o filă personalizată. La conectare, apelați warmup ().

încărcarea are loc ca un proces cu prioritate redusă, ceea ce înseamnă că nu va avea niciun impact negativ asupra performanței aplicației dvs., dar va oferi un impuls mare de performanță atunci când încărcați un link.

conținut Pre-randare #

Pre-randare va face conținut extern deschis instantaneu. Deci, ca și cum utilizatorul dvs. are cel puțin o probabilitate de 50% de a face clic pe link, apelați metoda mayLaunchUrl ().

apelarea mayLaunchUrl() va face ca filele personalizate să pre-aducă pagina principală cu conținutul de susținere și pre-randare. Acest lucru va oferi viteza maximă până la procesul de încărcare a paginii, dar vine cu un cost de rețea și baterie.

Custom Tabs este inteligent și știe dacă utilizatorul utilizează telefonul într-o rețea contorizată sau dacă este un dispozitiv low-end și pre-randare va avea un efect negativ asupra performanței generale a dispozitivului și nu va pre-fetch sau pre-render pe aceste scenarii. Deci, nu este nevoie să vă optimizați aplicația pentru aceste cazuri.

furnizați o rezervă pentru când filele personalizate nu sunt instalate #

deși filele personalizate sunt disponibile pentru marea majoritate a utilizatorilor, există câteva scenarii în care un browser care acceptă filele personalizate nu este instalat pe dispozitiv sau dispozitivul nu acceptă o versiune de browser care are activate filele personalizate.

asigurați-vă că pentru a oferi o rezervă care oferă o experiență bună de utilizator fie prin deschiderea browser-ul implicit sau folosind propria implementare WebView.

adăugați aplicația ca referrer #

de obicei, este foarte important ca Site-urile web să urmărească de unde provine traficul lor. Asigurați-vă că le anunțați că le trimiteți utilizatori setând referentul la lansarea filei personalizate

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

adăugați animații personalizate #

animațiile personalizate vor face trecerea de la aplicația dvs. la conținutul web mai ușoară. Asigurați-vă că animația finish este inversa animației start, deoarece va ajuta utilizatorul să înțeleagă că se întoarce la conținutul de unde a început navigarea.

alegerea unei pictograme pentru butonul de acțiune #

adăugarea unui buton de acțiune îi va face pe utilizatori să se implice mai mult în funcțiile aplicației. Dar, dacă nu există o pictogramă bună care să reprezinte acțiunea pe care o va efectua butonul de acțiune, creați un bitmap cu un text care descrie acțiunea.

amintiți-vă dimensiunea maximă pentru bitmap este 24dp înălțime x 48dp lățime.

pregătirea pentru alte browsere #

amintiți-vă că utilizatorul poate avea mai mult de un browser instalat care acceptă file personalizate. Dacă există mai multe browsere care acceptă file personalizate și niciunul dacă acestea sunt browserul preferat, întrebați utilizatorul cum dorește să deschidă linkul

permiteți utilizatorului să renunțe la filele personalizate #

adăugați o opțiune în aplicație pentru ca utilizatorul să deschidă linkuri în browserul implicit în loc să utilizeze o filă personalizată. Acest lucru este deosebit de important dacă aplicația a deschis linkul folosind browserul înainte de a adăuga suport pentru filele personalizate.

lăsați aplicațiile native să gestioneze conținutul #

unele adrese URL pot fi gestionate de aplicațiile native. Dacă utilizatorul are aplicația Twitter instalată și face clic pe un link către un tweet. Ea se așteaptă ca aplicația Twitter să se ocupe de ea.

înainte de a deschide o adresă url din aplicația dvs., verificați dacă este disponibilă o alternativă nativă și utilizați-o.

Personalizați culoarea barei de instrumente #

personalizați cu culoarea principală a aplicației dvs. dacă doriți ca utilizatorul să simtă că conținutul face parte din aplicația dvs.

dacă doriți să clarificați utilizatorului că a părăsit aplicația dvs., nu personalizați deloc culoarea.

adăugați o acțiune de partajare #

asigurați-vă că adăugați acțiunea de partajare în meniul overflow, deoarece utilizatorii se așteaptă să poată partaja linkul către conținutul pe care îl văd în majoritatea cazurilor de utilizare, iar filele personalizate nu adaugă una în mod implicit.

Personalizați butonul de închidere #

Personalizați butonul de închidere pentru a face fila personalizată să simtă că face parte din aplicația dvs.

dacă doriți ca utilizatorul să se simtă ca file personalizate este un dialog modal, utilizați butonul implicit „X”. Dacă doriți ca utilizatorul să simtă că fila personalizată face parte din fluxul aplicației, Utilizați săgeata înapoi.

mâner link-uri interne #

când interceptarea clicuri pe link-uri generate de android:autoLink sau imperative clicuri pe link-uri de pe WebViews, asigurați-vă că aplicația se ocupă de link-uri interne și să File personalizate se ocupe de cele externe.

gestionați mai multe clicuri #

dacă trebuie să efectuați orice procesare între utilizatorul care face clic pe un link și deschide fila personalizată, asigurați-vă că rulează sub 100ms. în caz contrar, oamenii vor vedea lipsa de reacție și pot încerca să facă clic de mai multe ori pe link.

dacă nu este posibil să evitați întârzierea, asigurați-vă că aplicația este pregătită atunci când un utilizator face clic de mai multe ori pe același link și nu deschide o filă personalizată de mai multe ori.

API de nivel scăzut #

deși metoda recomandată pentru integrarea aplicației dvs. cu filele personalizate utilizează biblioteca de asistență pentru filele personalizate, este disponibilă și o implementare de nivel scăzut.

implementarea completă a Bibliotecii de asistență este disponibilă pe Github și poate fi utilizată ca punct de pornire. De asemenea, conține fișierele aidl necesare pentru conectarea la serviciu, deoarece cele conținute în depozitul Chromium nu sunt direct utilizabile cu Android Studio.

Noțiuni de bază pentru lansarea filelor personalizate utilizând API-ul de nivel scăzut #

adăugarea personalizărilor UI #

personalizările UI sunt incluse prin adăugarea de elemente suplimentare la intenția ACTION_VIEW. O listă completă a tastelor extra utilizate pentru personalizarea UI poate fi găsită pe documentele CustomTabsIntent. Urmează un exemplu despre cum să adăugați o culoare personalizată a barei de instrumente:

conectarea la Serviciul file personalizate #

serviciul file personalizate poate fi utilizat în același mod în care sunt și alte servicii Android. Interfața este creată cu AIDL și creează automat o clasă de servicii proxy pentru dvs.

utilizați metodele de pe serviciul proxy pentru a warm – up, de a crea sesiuni și pre-fetch

link-uri utile #

  • Github Demo
  • file personalizate Chrome pe StackOverflow

FAQ #

  • când va fi disponibil acest lucru pe canalul stabil?
    • filele personalizate Chrome sunt disponibile începând cu Chrome 45.
  • unde pot pune întrebări?
    • etichetă Stackoverflow: chrome-Custom-tabs