Chrome Custom Tabs

BY admin
|

Hva Er Chrome Custom Tabs? #

Apputviklere står overfor et valg når en bruker trykker PÅ EN URL for å enten starte en nettleser, eller bygge sin egen nettleser i appen ved Hjelp Av WebViews.

Begge alternativene gir utfordringer—lansering av nettleseren er en tung kontekstbryter som ikke kan tilpasses, Mens WebViews ikke deler tilstand med nettleseren og legger til vedlikehold overhead.

Tilpassede Faner I Chrome gir apper mer kontroll over nettopplevelsen, og gjør overganger mellom opprinnelig innhold og nettinnhold mer sømløse uten Å måtte ty til En Webvisning.

Tilpassede Faner I Chrome lar en app tilpasse Hvordan Chrome ser ut og føles. En app kan endre ting som:

  • Farge på Verktøylinjen
  • Angi og avslutte animasjoner
  • Legg til egendefinerte handlinger På Chrome-verktøylinjen, overflyt-menyen og den nederste verktøylinjen

Egendefinerte Faner i Chrome gjør det også mulig for utvikleren å forhåndsstarte Chrome og forhåndsf hente innhold for raskere lasting.

du kan teste dette nå med vår prøve På Github.

når skal Jeg bruke Chrome Custom Tabs vs WebView? #

WebView er god løsning hvis Du er vert for ditt eget innhold i appen din. Hvis appen din sender folk til Nettadresser utenfor domenet ditt, anbefaler vi at Du bruker Egendefinerte Chrome-Faner av disse grunnene:

  • Enkel å implementere. Du trenger ikke å bygge kode for å håndtere forespørsler,tillatelser eller informasjonskapsler.

  • UI tilpasning:

    • Verktøylinjefarge
    • Handlingsknapp
    • Egendefinerte inn/ut-animasjoner
    • nederste verktøylinje

  • navigasjon bevissthet: nettleseren leverer en tilbakeringing til programmet på en ekstern navigasjon.

  • Sikkerhet: nettleseren bruker Googles Safe Browsing for å beskytte brukeren og enheten mot farlige nettsteder.

  • Ytelsesoptimalisering:

    • Forvarming Av Nettleseren i bakgrunnen, samtidig som du unngår å stjele ressurser fra applikasjonen.
    • Gir en sannsynlig URL på forhånd til nettleseren, som kan utføre spekulativt arbeid, påskynde sidens lastetid.

  • Livssyklusadministrasjon: nettleseren forhindrer at programmet blir kastet ut av systemet mens det er på toppen av det, ved å øke sin betydning for» forgrunnen » – nivået.

  • Delt cookie jar og tillatelser modell slik at brukerne ikke trenger å logge på nettsteder de allerede er koblet til, eller gi tillatelser de allerede har gitt.

  • hvis brukeren har slått På Datasparing, vil de fortsatt ha nytte av Det.

  • Synkronisert Autofullføring på tvers av enheter for bedre skjemafullføring.

  • Enkel tilpasning modell.

  • Raskt tilbake til app med et enkelt trykk.

  • Du vil bruke de nyeste nettleserimplementeringene på enheter pre-Lollipop (automatisk oppdatering WebView) i stedet for eldre WebViews.

Når vil dette være tilgjengelig? #

Fra Chrome 45 Er Chrome Custom Tabs nå generelt tilgjengelig for Alle Brukere Av Chrome, på Alle Chrome-støttede Android-versjoner(Jellybean og fremover).

vi leter etter tilbakemelding, spørsmål og forslag til dette prosjektet, så vi oppfordrer deg til å sende inn problemer på crbug.com og still spørsmål til Vår Twitter-konto @ChromiumDev.

Implementeringsveiledning #

et komplett eksempel er tilgjengelig på https://github.com/GoogleChrome/custom-tabs-client. Den inneholder gjenbrukbare klasser for å tilpasse BRUKERGRENSESNITTET, koble til bakgrunnstjenesten og håndtere livssyklusen til både applikasjonen og den egendefinerte faneaktiviteten.

hvis du følger veiledningen fra denne siden, vil du kunne skape en flott integrasjon.

det første trinnet for integrering Av Egendefinerte Faner er å legge Til Støttebiblioteket For Egendefinerte Faner i prosjektet. Åpne filen build.gradle og legg til støttebiblioteket i avhengighet-delen.

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

Når Støttebiblioteket er lagt til i prosjektet, er det to sett med mulige tilpasninger:

  • Tilpasse BRUKERGRENSESNITTET og samspillet med de egendefinerte fanene.
  • Gjør siden lastes raskere, og holde programmet i live.

BRUKERGRENSESNITTTILPASNINGENE gjøres ved å bruke klassene CustomTabsIntent og CustomTabsIntent.Builder; ytelsesforbedringene oppnås ved å bruke CustomTabsClient til å koble Til Tjenesten Egendefinerte Faner, varme Opp Chrome og la den vite hvilke nettadresser som skal åpnes.

Åpne En Tilpasset Chrome-Fane #

Konfigurer fargen på adresselinjen #

En av de viktigste (og enkleste å implementere) aspektene Ved Egendefinerte Chrome-Faner er muligheten for deg å endre fargen på adresselinjen for å være i samsvar med appens tema.

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

Konfigurer en egendefinert handlingsknapp #

som utvikler av appen din har du full kontroll over Handlingsknappen som presenteres for brukerne dine i Chrome-fanen.

i de fleste tilfeller vil dette være en primær handling Som Del, eller en annen vanlig aktivitet som brukerne vil utføre.

Handlingsknappen er representert som En Bunt med et ikon for handlingsknappen og en pendingIntent Som Vil bli kalt Av Chrome når brukeren treffer handlingsknappen. Ikonet er currentlty 24dp i høyde og 24-48 dp i bredde.

Konfigurer en egendefinert meny #

Chrome-nettleseren har en omfattende meny med handlinger som brukere vil utføre ofte i en nettleser, men de kan ikke være relevante for programkonteksten din.

som utvikler kan du legge til og tilpasse opptil fem menyelementer som vises mellom ikonraden og fotelementene.

menyelementet legges til ved å ringe CustomTabsIntent.Builder#addMenuItem med tittel og en pendingIntent Som Chrome vil ringe på dine vegne når brukeren trykker på elementet sendes som parametere.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Konfigurer egendefinerte inn-og avslutningsanimasjoner #

Mange Android-programmer bruker egendefinert Visning Av Inn-og avslutningsanimasjoner ved overgang mellom Aktiviteter På Android. Chrome Tilpassede Faner er ikke annerledes, du kan endre inngang og utgang (når brukeren trykker Tilbake) animasjoner for å holde dem i samsvar med resten av programmet.

Varm Opp Chrome for å få sider til å lastes raskere #

som standard, når CustomTabsIntent#launchUrl kalles, vil Den spinne Opp Chrome og starte NETTADRESSEN. Dette kan ta opp dyrebar tid og innvirkning på oppfatningen av glatthet.

vi tror at brukerne krever en nesten øyeblikkelig opplevelse, så vi har gitt En Tjeneste I Chrome som appen din kan koble Til og fortelle Chrome å varme opp nettleseren og de opprinnelige komponentene. Vi eksperimenterer også med muligheten for Deg, utvikleren å fortelle Chrome det sannsynlige settet av nettsider brukeren vil besøke. Chrome vil da kunne utføre:

  • DNS-forhåndsoppløsning for hoveddomenet
  • DNS-forhåndsoppløsning for de mest sannsynlige underressursene
  • forhåndstilkobling til destinasjonen inkludert HTTPS/TLS-forhandling.

Prosessen For oppvarming Av Krom er som følger:

  • Bruk CustomTabsClient#bindCustomTabsService for å koble til tjenesten.
  • når tjenesten er tilkoblet, ring CustomTabsClient#warmup for å starte Chrome bak kulissene.
  • Ring CustomTabsClient#newSession for å opprette en ny økt. Denne sesjonen brukes for alle forespørsler TIL API.
  • du kan eventuelt legge ved en CustomTabsCallback som parameter når du oppretter en ny økt, slik at du vet at en side ble lastet inn.
  • Fortell Chrome hvilke sider brukeren sannsynligvis vil laste med CustomTabsSession#mayLaunchUrl.
  • Ring CustomTabsIntent.Builder konstruktøren som passerer den opprettede CustomTabsSession som en parameter.

Koble Til Chrome-Tjenesten #

CustomTabsClient#bindCustomTabsService – metoden fjerner kompleksiteten ved å koble til Custom Tabs-tjenesten.

Opprett en klasse som strekker seg CustomTabsServiceConnection og bruk onCustomTabsServiceConnected for å få en forekomst av CustomTabsClient. Denne forekomsten vil være nødvendig i de neste trinnene.

Varm Opp Nettleserprosessen #

boolean warmup(long flags)

Varmer opp nettleseren prosessen og laster de innfødte bibliotekene. Warmup er asynkron, returverdien angir om forespørselen er godtatt. Flere vellykkede samtaler vil også returnere true.

Returnerer true for suksess.

Opprett en ny faneøkt#

boolean newSession(CustomTabsCallback callback)

Session brukes i senere samtaler for å koble mayLaunchUrl samtale, CustomTabsIntent og fanen generert til hverandre. Tilbakeringingen som er oppgitt her, er knyttet til den opprettede økten. Eventuelle oppdateringer for den opprettede økten (Se Egendefinerte Faner Tilbakeringing nedenfor) er også mottatt gjennom denne tilbakeringing. Returnerer om en økt ble opprettet. Flere anrop med Samme CustomTabsCallback eller en nullverdi vil returnere false.

Fortell Chrome Hvilken URL brukeren sannsynligvis vil åpne #

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

Denne CustomTabsSession-metoden forteller nettleseren om en sannsynlig fremtidig navigering til EN URL. Metoden warmup() bør kalles først som en beste praksis. DEN MEST sannsynlige URL må angis først. Eventuelt kan en liste over andre sannsynlige Nettadresser gis. De blir behandlet som mindre sannsynlig enn den første, og må sorteres i avtagende prioritetsordre. Disse Ekstra Nettadressene kan ignoreres. Alle tidligere samtaler til denne metoden vil bli nedprioritert. Returnerer om operasjonen er fullført.

Egendefinerte Faner Tilkobling Tilbakeringing #

void onNavigationEvent(int navigationEvent, Bundle extras)

vil bli kalt når en navigasjonshendelse skjer i kategorien egendefinert. NavigationEvent int er en av 6 verdier som definerer tilstanden til siden er i. Se nedenfor for mer informasjon.

hva skjer Hvis brukeren ikke har en nyere Versjon Av Chrome installert? #

Egendefinerte Faner bruker EN ACTION_VIEW-Hensikt med Viktige Tillegg for å tilpasse BRUKERGRENSESNITTET. Dette betyr at siden som standard vilåpne i systemleseren, eller brukerens standard nettleser.

Hvis Brukeren Har Chrome installert og det er standard nettleser, vil det automatisk plukke OPP STATISTER og presentere en tilpasset UI. Det er også mulig for en annen nettleser å bruke Intent extras å gi en lignende tilpasset grensesnitt.

Hvordan kan Jeg sjekke Om Chrome støtter Egendefinerte Faner I Chrome? #

alle versjoner Av Chrome støtter Chrome Tilpassede Faner utsette en tjeneste. For å sjekke om Chrome støtter egendefinerte faner, prøv å binde til tjenesten. Hvis det lykkes, kan egendefinerte faner trygt brukes.

Beste Praksis #

Siden Chrome Custom Tabs ble lansert, har vi sett ulike implementeringer med ulike kvalitetsnivåer. Denne delen beskriver et sett med beste praksis vi har funnet for å skape en god integrasjon.

Koble til Tjenesten Egendefinerte Faner og ring warmup () #

du kan lagre opptil 700 ms når du åpner en kobling Med Egendefinerte Faner ved å koble til tjenesten og forhåndslaste Chrome.

Koble til Tjenesten Egendefinerte Faner på onstart () – metoden For Aktivitetene du planlegger å starte En Egendefinert Fane fra. Ved tilkobling, ring warmup ().

lasting skjer som en lav prioritet prosess, noe som betyr at det ikke vil ha noen negativ ytelse innvirkning på programmet, men vil gi en stor ytelsesforbedring når du laster inn en link.

pre-render innhold #

Pre-rendering vil gjøre eksternt innhold åpent umiddelbart. Så, som om brukeren din har minst 50% sannsynlighet for å klikke på linken, ring maylaunchurl () – metoden.

Calling mayLaunchUrl () vil Gjøre Egendefinerte Faner pre-hente hovedsiden med støtte innhold og pre-render. Dette vil gi maksimal hastighet opp til siden lasting prosessen, men kommer med et nettverk og batteri kostnad.

Egendefinerte Faner er smarte og vet om brukeren bruker telefonen på et forbruksmålt nettverk, eller hvis det er en lav end enhet og pre-rendering vil ha en negativ effekt på den generelle ytelsen til enheten og vil ikke pre-hente eller pre-gjengi på disse scenariene. Så det er ikke nødvendig å optimalisere søknaden din for disse tilfellene.

Gi en reserve for Når Egendefinerte Faner ikke er installert #

Selv Om Egendefinerte Faner er tilgjengelig for de aller fleste brukere, finnes det noen scenarier der en nettleser som støtter Egendefinerte Faner ikke er installert på enheten, eller enheten ikke støtter en nettleserversjon som har Egendefinerte Faner aktivert.

Sørg For å gi en reserve som gir en god brukeropplevelse ved enten å åpne standard nettleser eller bruke Din Egen webview implementering.

Legg til appen din som referrer #

det er vanligvis svært viktig for nettsteder å spore hvor trafikken kommer fra. Sørg for at du lar dem vite at du sender dem brukere ved å sette henviseren når du starter Den Egendefinerte Kategorien

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

Legg til egendefinerte animasjoner #

Egendefinerte animasjoner vil gjøre overgangen fra programmet til webinnholdet jevnere. Pass på at sluttanimasjonen er motsatt av startanimasjonen, da det vil hjelpe brukeren å forstå at hun kommer tilbake til innholdet der navigasjonen startet.

Hvis du Velger et ikon For Handlingsknappen #

Hvis du Legger til En Handlingsknapp, blir brukerne mer opptatt av appfunksjonene dine. Men hvis det ikke er et godt ikon for å representere handlingen Din Handlingsknapp vil utføre, lage en bitmap med en tekst som beskriver handlingen.

Husk at maksimal størrelse for punktgrafikken er 24dp høyde x 48dp bredde.

Klargjøre for andre nettlesere #

Husk at brukeren kan ha installert flere nettlesere som støtter Egendefinerte Faner. Hvis det er mer enn en nettleser som støtter Egendefinerte Faner og ingen hvis de er den foretrukne nettleseren, spør brukeren hvordan hun vil åpne koblingen

Tillat brukeren å velge Bort Egendefinerte Faner #

Legg til et alternativ i programmet for brukeren å åpne koblinger i standardnettleseren i stedet for Å bruke En Egendefinert Fane. Dette er spesielt viktig hvis programmet åpnet koblingen ved hjelp av nettleseren før du legger til støtte For Egendefinerte Faner.

La innfødte programmer håndtere innholdet #

Enkelte Nettadresser kan håndteres av opprinnelige programmer. Hvis brukeren har Twitter-appen installert og klikker på en lenke til en tweet. Hun forventer At Twitter-applikasjonen vil håndtere det.

før du åpner en url fra søknaden din, må du kontrollere om et opprinnelig alternativ er tilgjengelig og bruke det.

Tilpass verktøylinjefarge #

Tilpass med programmets primære farge hvis du vil at brukeren skal føle at innholdet er en del av søknaden din.

hvis du vil gjøre det klart for brukeren at hun har forlatt søknaden din, må du ikke tilpasse fargen i det hele tatt.

Legg Til En Delingshandling #

Pass på at Du legger Til Delingshandlingen på overflyt-menyen, da brukerne forventer å kunne dele koblingen til innholdet de ser i de fleste brukstilfeller, og Egendefinerte Faner legger ikke til en som standard.

Tilpass lukkeknappen #

Tilpass lukkeknappen for Å få Den Egendefinerte Fanen til å føle at den er en del av søknaden din.

hvis du vil at brukeren skal føle At Egendefinerte Faner er en modal dialog, bruk standard » X » – knappen. Hvis du vil at brukeren skal føle Den Egendefinerte Kategorien er en del av programflyten, bruker du tilbakepilen.

Håndter interne lenker #

når du fanger opp klikk på koblinger generert av android:autoLink eller overordnede klikk på koblinger På WebViews, sørg for at søknaden håndterer de interne koblingene og La Oss Tilpassede Faner håndtere de eksterne.

Håndter flere klikk #

hvis du trenger å gjøre noen behandling mellom brukeren som klikker på en lenke og åpner Den Egendefinerte Fanen, må du sørge for at den kjører under 100ms. ellers vil folk se manglende respons og kan prøve å klikke flere ganger på lenken.

hvis det ikke er mulig å unngå forsinkelsen, må du sørge for at programmet er forberedt på når en bruker klikker flere ganger på samme kobling og ikke åpner En Egendefinert Fane flere ganger.

Lavt NIVÅ API #

selv om den anbefalte metoden for å integrere programmet Med Egendefinerte Faner, bruker Støttebiblioteket For Egendefinerte Faner, er implementering på lavt nivå også tilgjengelig.

den komplette implementeringen Av Støttebiblioteket er tilgjengelig På Github og kan brukes som startpunkt. Den inneholder OGSÅ AIDL-filene som kreves for å koble til tjenesten, da de som finnes i Chromium-depotet, ikke er direkte brukbare Med Android Studio.

Grunnleggende For Å Starte Egendefinerte Faner ved Hjelp Av Lavnivå API #

Legge TIL UI-Tilpasninger #

UI-Tilpasninger er inkludert ved å legge Til Tillegg I ACTION_VIEW-Hensikten. En fullstendig liste over ekstra tastene som brukes til å tilpasse UI kan bli funnet På CustomTabsIntent docs. Et eksempel på hvordan du legger til en egendefinert verktøylinjefarge følger:

Koble Til Tjenesten Egendefinerte Faner #

Tjenesten Egendefinerte Faner kan brukes på samme måte Som Andre Android-Tjenester. Grensesnittet er opprettet MED AIDL og oppretter automatisk en proxy service klasse for deg.

Bruk metodene på proxy-tjenesten til å varme opp, opprette økter og hente

Nyttige Lenker #

  • Github Demo
  • Chrome Tilpassede Faner på StackOverflow

FAQ #

  • Når vil dette være tilgjengelig på stabil kanal?
    • Tilpassede Chrome-Faner er tilgjengelige fra Og Med Chrome 45.
  • Hvor kan jeg stille spørsmål?
    • stackoverflow stikkord: chrome-egendefinerte faner