Chrome Brugerdefinerede faner

BY admin
|

Hvad er Chrome Brugerdefinerede faner? #

appudviklere står over for et valg, når en bruger trykker på en URL for enten at starte en bro.ser eller bygge deres egen bro. ser i appen ved hjælp af Internetvisninger.

begge muligheder giver udfordringer—lancering af bro.ser er en tung kontekstkontakt, der ikke kan tilpasses, mens Internetvisninger ikke deler tilstand med bro. ser og tilføjer vedligeholdelsesomkostninger.

Chrome Brugerdefinerede faner giver apps mere kontrol over deres internetoplevelse og gør overgange mellem indfødt og internetindhold mere problemfri uden at skulle ty til en Internetvisning.

Chrome Brugerdefinerede faner tillader en app at tilpasse, hvordan Chrome ser ud og føles. En app kan ændre ting som:

  • Toolbar color
  • Indtast og afslut animationer
  • Føj brugerdefinerede handlinger til Chrome-værktøjslinjen, overløbsmenuen og den nederste værktøjslinje

Chrome Brugerdefinerede faner giver også udvikleren mulighed for at starte Chrome og hente indhold for hurtigere indlæsning.

du kan teste dette nu med vores prøve på Github.

Hvornår skal jeg bruge Chrome Custom Tabs? #

Internetvisningen er en god løsning, hvis du er vært for dit eget indhold i din app. Hvis din app dirigerer folk til URL ‘ er uden for dit domæne, anbefaler vi, at du bruger Chrome Brugerdefinerede faner af disse grunde:

  • enkel at implementere. Ingen grund til at opbygge kode for at administrere anmodninger, tilladelsestilskud eller cookiebutikker.

  • UI tilpasning:

    • Værktøjslinjefarve
    • handlingsknap
    • Brugerdefinerede menupunkter
    • brugerdefinerede in / out-animationer
    • nederste værktøjslinje

  • Navigationsbevidsthed: bro.sereren leverer et tilbagekald til applikationen ved en ekstern navigation.

  • sikkerhed: søgemaskinen bruger Googles sikre søgning for at beskytte brugeren og enheden mod farlige steder.

  • optimering af ydeevne:

    • i baggrunden, samtidig med at man undgår at stjæle ressourcer fra applikationen.
    • tilvejebringelse af en sandsynlig URL på forhånd til bro.ser, som kan udføre spekulativt arbejde, hvilket fremskynder sideindlæsningstiden.

  • livscyklusstyring: bro.ser forhindrer applikationen i at blive udvist af systemet, mens den er oven på den, ved at hæve dens betydning til “forgrunden” – niveauet.

  • delt cookie jar og tilladelsesmodel, så brugerne ikke behøver at logge ind på sider, de allerede har forbindelse til, eller give tilladelser, de allerede har givet.

  • hvis brugeren har aktiveret Data Saver, vil de stadig drage fordel af det.

  • synkroniseret autofuldførelse på tværs af enheder for bedre formularafslutning.

  • enkel tilpasning model.

  • hurtigt vende tilbage til app med et enkelt tryk.

  • du vil bruge de nyeste implementeringer på enheder pre-Lollipop (automatisk opdatering af Internetvisning) i stedet for ældre Internetvisninger.

Hvornår vil dette være tilgængeligt? #

fra Chrome 45 er Chrome Custom Tabs nu generelt tilgængelig for alle brugere af Chrome på alle Chromes understøttede Android-versioner (Jellybean og fremefter).

vi leder efter feedback, spørgsmål og forslag til dette projekt, så vi opfordrer dig til at arkivere problemer på crbug.com og stille spørgsmål til vores kvidre konto @ChromiumDev.

Implementeringsvejledning #

et komplet eksempel er tilgængeligt på https://github.com/GoogleChrome/custom-tabs-client. Den indeholder genanvendelige klasser til at tilpasse brugergrænsefladen, oprette forbindelse til baggrundstjenesten og håndtere livscyklussen for både applikationen og den brugerdefinerede faneaktivitet.

hvis du følger vejledningen fra denne side, vil du være i stand til at skabe en stor integration.

det første trin til en integration af brugerdefinerede faner er at tilføje Supportbiblioteket til brugerdefinerede faner til dit projekt. Åbn filen build.gradle, og føj supportbiblioteket til afsnittet afhængighed.

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

når Supportbiblioteket er føjet til dit projekt, er der to sæt mulige tilpasninger:

  • tilpasning af brugergrænsefladen og interaktion med de brugerdefinerede faner.
  • gør siden hurtigere og holder applikationen i live.

UI-tilpasningerne udføres ved hjælp af klasserne CustomTabsIntent og CustomTabsIntent.Builder; ydelsesforbedringerne opnås ved at bruge CustomTabsClient til at oprette forbindelse til tjenesten Custom Tabs, varme Chrome op og lade det vide, hvilke URL ‘ er der åbnes.

åbning af en Chrome brugerdefineret fane #

Konfigurer farven på adresselinjen #

et af de vigtigste (og enkleste at implementere) aspekter af Chrome Brugerdefinerede faner er muligheden for dig at ændre farven på adresselinjen for at være i overensstemmelse med din apps tema.

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

Indstil en brugerdefineret handlingsknap #

som udvikler af din app har du fuld kontrol over handlingsknappen, der præsenteres for dine brugere under fanen Chrome.

i de fleste tilfælde vil dette være en primær handling som del eller en anden almindelig aktivitet, som dine brugere vil udføre.

handlingsknappen er repræsenteret som et bundt med et ikon for handlingsknappen og en pendingIntent, der kaldes af Chrome, når din bruger rammer handlingsknappen. Ikonet er aktuelt 24dp i højden og 24-48 dp i bredden.

Indstil en brugerdefineret menu #

Chrome har en omfattende menu med handlinger, som brugerne ofte udfører i en bro.ser, men de er muligvis ikke relevante for din applikationskontekst.

som udvikler kan du tilføje og tilpasse op til fem menupunkter, der vises mellem ikonrækken og fodelementerne.

menupunktet tilføjes ved at ringe CustomTabsIntent.Builder#addMenuItem med titel og en pendingIntent, som Chrome vil ringe på dine vegne, når brugeren trykker på elementet, sendes som parametre.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Konfigurer brugerdefinerede enter og afslut animationer #

mange Android-applikationer bruger brugerdefineret visning indgangs-og Udgangsanimationer, når overgangen mellem aktiviteter på Android. Chrome Brugerdefinerede faner er ikke anderledes, Du kan ændre indgangen og udgangen (når brugeren trykker tilbage) animationer for at holde dem i overensstemmelse med resten af din applikation.

varm Chrome op for at få sider til at indlæse hurtigere #

som standard, når CustomTabsIntent#launchUrl kaldes, vil det spinde Chrome op og starte URL ‘ en. Dette kan tage dyrebar tid og påvirke opfattelsen af glathed.

vi mener, at brugerne kræver en næsten øjeblikkelig oplevelse, så vi har leveret en Service i Chrome, som din app kan oprette forbindelse til og bede Chrome om at varme op bro.ser og de oprindelige komponenter. Vi eksperimenterer også med muligheden for dig, udvikleren til at fortælle Chrome det sandsynlige sæt hjemmesider, brugeren vil besøge. Chrome vil derefter kunne udføre:

  • DNS-foropløsning af hoveddomænet
  • DNS-foropløsning af de mest sandsynlige underressourcer
  • Forforbindelse til destinationen inklusive HTTPS/TLS-forhandling.

processen til opvarmning af krom er som følger:

  • brug CustomTabsClient#bindCustomTabsService til at oprette forbindelse til tjenesten.
  • når tjenesten er tilsluttet, skal du ringe til CustomTabsClient#warmup for at starte Chrome bag kulisserne.
  • Ring CustomTabsClient#newSession for at oprette en ny session. Denne session bruges til alle anmodninger til API.
  • vedhæft eventuelt en CustomTabsCallback som parameter, når du opretter en ny session, så du ved, at en side blev indlæst.
  • Fortæl Chrome, hvilke sider brugeren sandsynligvis vil indlæse med CustomTabsSession#mayLaunchUrl.
  • ring til CustomTabsIntent.Builder konstruktøren, der passerer den oprettede CustomTabsSession som en parameter.

Opret forbindelse til Chrome-tjenesten #

metoden CustomTabsClient#bindCustomTabsService fjerner kompleksiteten ved at oprette forbindelse til tjenesten Custom Tabs.

Opret en klasse, der udvider CustomTabsServiceConnection og brug onCustomTabsServiceConnectedfor at få en forekomst af CustomTabsClient. Denne instans vil være nødvendig på de næste trin.

varm op bro. ser processen #

boolean warmup(long flags)

varmer op bro.ser processen og indlæser de indfødte biblioteker. Opvarmning er asynkron, returværdien angiver, om anmodningen er blevet accepteret. Flere vellykkede opkald vil også vende tilbage sandt.

returnerer true for succes.

Opret en ny fanesession #

boolean newSession(CustomTabsCallback callback)

Session bruges i efterfølgende opkald til at linke mayLaunchUrl-opkald, CustomTabsIntent og fanen genereret til hinanden. Tilbagekaldelsen, der leveres her, er knyttet til den oprettede session. Eventuelle opdateringer til den oprettede session (se brugerdefinerede faner tilbagekald nedenfor) modtages også via denne tilbagekald. Returnerer, om en session blev oprettet. Flere opkald med samme CustomTabsCallback eller en null værdi vil returnere false.

Fortæl Chrome, hvilken URL brugeren sandsynligvis vil åbne #

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

denne CustomTabsSession metode fortæller bro.ser af en sandsynlig fremtidig navigation til en URL. Metoden warmup() skal først kaldes en bedste praksis. Den mest sandsynlige URL skal angives først. Eventuelt kan en liste over andre sandsynlige URL ‘ er leveres. De behandles som mindre sandsynlige end den første og skal sorteres i faldende prioriteret rækkefølge. Disse yderligere URL ‘ er kan ignoreres. Alle tidligere opkald til denne metode vil blive deprioriteret. Returnerer, om operationen er fuldført.

brugerdefinerede faner tilslutning tilbagekald #

void onNavigationEvent(int navigationEvent, Bundle extras)

vil blive kaldt, når en navigationshændelse sker i fanen Brugerdefineret. Den ‘navigationEvent int’ er en af 6 værdier, der definerer tilstanden af siden er i. Se nedenfor for mere information.

Hvad sker der, hvis brugeren ikke har en nyere version af Chrome installeret? #

brugerdefinerede faner bruger en HANDLING_VISNINGSINTENTION med vigtige ekstramateriale til at tilpasse brugergrænsefladen. Dette betyder, at siden som standard vilåbn i systemsøgeren eller brugerens standardsøgemaskine.

hvis brugeren har Chrome installeret, og det er standardsøgeren, henter den automatisk ekstramateriale og præsenterer et tilpasset brugergrænseflade. Det er også muligt for en anden bro.ser at bruge Intent ekstramateriale til at give en lignende tilpasset grænseflade.

Hvordan kan jeg kontrollere, om Chrome understøtter Chrome Brugerdefinerede faner? #

alle versioner af Chrome, der understøtter Chrome-Brugerdefinerede faner, udsætter en tjeneste. For at kontrollere, om Chrome understøtter brugerdefinerede faner, skal du prøve at binde til tjenesten. Hvis det lykkes, kan brugerdefinerede faner sikkert bruges.

bedste praksis #

siden Chrome Custom Tabs blev lanceret, har vi set forskellige implementeringer med forskellige niveauer af kvalitet. Dette afsnit beskriver et sæt bedste fremgangsmåder, vi har fundet for at skabe en god integration.

Opret forbindelse til tjenesten brugerdefinerede faner og opkaldsopvarmning() #

du kan gemme op til 700 ms, når du åbner et link med de brugerdefinerede faner ved at oprette forbindelse til tjenesten og forudindlæse Chrome.

Opret forbindelse til tjenesten brugerdefinerede faner på onstart () – metoden for de aktiviteter, du planlægger at starte en brugerdefineret fane fra. Ved tilslutning skal du ringe til opvarmning ().

indlæsningen sker som en proces med lav prioritet, hvilket betyder, at den ikke vil have nogen negativ ydelsespåvirkning på din applikation, men vil give et stort ydelsesforøgelse, når du indlæser et link.

pre-render indhold #

Pre-rendering vil gøre eksternt indhold åbent med det samme. Så som om din bruger har mindst 50% sandsynlighed for at klikke på linket, skal du ringe til mayLaunchUrl () – metoden.

opkald mayLaunchUrl() vil gøre brugerdefinerede faner pre-hente hovedsiden med den understøttende indhold og pre-render. Dette giver den maksimale hastighed op til sideindlæsningsprocessen, men leveres med et netværk og batteriomkostninger.

Custom Tabs er smart og ved, om brugeren bruger telefonen på et afmålt netværk, eller om det er en lav ende enhed og pre-rendering vil have en negativ effekt på den samlede ydelse af enheden og vil ikke pre-hente eller pre-render på disse scenarier. Så der er ingen grund til at optimere din ansøgning til disse sager.

Giv en tilbagekaldelse, når brugerdefinerede faner ikke er installeret #

selvom brugerdefinerede faner er tilgængelige for det store flertal af brugere, er der nogle scenarier, hvor en bro.ser, der understøtter brugerdefinerede faner, ikke er installeret på enheden, eller enheden ikke understøtter en bro. serversion, der har brugerdefinerede faner aktiveret.

sørg for at give et tilbagefald, der giver en god brugeroplevelse ved enten at åbne standardsøgeren eller ved at bruge din egen implementering.

Tilføj din app som referrer #

det er normalt meget vigtigt for hjemmesider at spore, hvor deres trafik kommer fra. Sørg for at lade dem vide, at du sender dem brugere ved at indstille henviseren, når du starter din brugerdefinerede fane

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

Tilføj brugerdefinerede animationer #

brugerdefinerede animationer gør overgangen fra din applikation til internetindholdet glattere. Sørg for, at finish-animationen er det modsatte af start-animationen, da det hjælper brugeren med at forstå, at hun vender tilbage til det indhold, hvor navigationen startede.

valg af et ikon til handlingsknappen #

tilføjelse af en handlingsknap får brugerne til at engagere sig mere med dine appfunktioner. Men hvis der ikke er et godt ikon til at repræsentere den handling, din handlingsknap udfører, skal du oprette en bitmap med en tekst, der beskriver handlingen.

husk den maksimale størrelse for bitmap er 24dp højde 48dp bredde.

forberedelse til andre bro.ser #

Husk, at brugeren muligvis har installeret mere end en bro. ser, der understøtter brugerdefinerede faner. Hvis der er mere end en bro.ser, der understøtter brugerdefinerede faner, og ingen, hvis de er den foretrukne bro. ser, skal du spørge brugeren, hvordan hun vil åbne linket

Tillad brugeren at fravælge brugerdefinerede faner #

Tilføj en mulighed i applikationen, så brugeren kan åbne links i standardbro. ser i stedet for at bruge en brugerdefineret fane. Dette er specielt vigtigt, hvis applikationen åbnede linket ved hjælp af bro.ser, før du tilføjede support til brugerdefinerede faner.

lad native applications håndtere indholdet #

nogle URL ‘ er kan håndteres af native applications. Hvis brugeren har kvidre-appen installeret og klikker på et link til en kvidre. Hun forventer, at kvidre ansøgning vil håndtere det.

før du åbner en url fra din applikation, skal du kontrollere, om et oprindeligt alternativ er tilgængeligt, og bruge det.

Tilpas værktøjslinjens farve #

tilpas med din applikations primære farve, hvis du vil have brugeren til at føle, at indholdet er en del af din applikation.

hvis du vil gøre det klart for brugeren, at hun har forladt din applikation, skal du slet ikke tilpasse farven.

Tilføj en Delingshandling #

sørg for at føje handlingen del til menuen overløb, da brugerne forventer at kunne dele linket til det indhold, de ser i de fleste brugssager, og brugerdefinerede faner tilføjer ikke en som standard.

Tilpas knappen Luk #

Tilpas knappen Luk for at få den brugerdefinerede fane til at føle, at den er en del af din applikation.

hvis du vil have brugeren til at føle, at brugerdefinerede faner er en Modal dialog, skal du bruge standardknappen “h”. Hvis du vil have brugeren til at føle, at fanen Brugerdefineret er en del af applikationsstrømmen, skal du bruge pilen tilbage.

Håndter Interne links #

når du opfanger klik på links genereret af android:autoLink eller overordnede klik på links på Internetvisninger, skal du sørge for, at din applikation håndterer de interne links, og lad os brugerdefinerede faner håndtere de eksterne.

Håndter flere klik #

hvis du skal foretage nogen behandling mellem brugeren, der klikker på et link og åbner fanen Brugerdefineret, skal du sørge for, at den kører under 100 ms. ellers vil folk se manglende respons og kan prøve at klikke flere gange på linket.

hvis det ikke er muligt at undgå forsinkelsen, skal du sørge for, at applikationen er forberedt, når en bruger klikker flere gange på det samme link og ikke åbner en brugerdefineret fane flere gange.

lavt niveau API #

selvom den anbefalede metode til at integrere din applikation med brugerdefinerede faner bruger brugerdefinerede faner Supportbibliotek, er en implementering på lavt niveau også tilgængelig.

den komplette implementering af Supportbiblioteket er tilgængelig på Github og en bruges som udgangspunkt. Den indeholder også de AIDL-filer, der kræves for at oprette forbindelse til tjenesten, da dem, der er indeholdt i Chromium-depotet, ikke er direkte anvendelige med Android Studio.

grundlæggende for lancering af brugerdefinerede faner ved hjælp af API på lavt niveau #

tilføjelse af UI-tilpasninger #

UI-tilpasninger er inkluderet ved at tilføje ekstramateriale til handlingens hensigt. En komplet liste over de ekstra nøgler, der bruges til at tilpasse brugergrænsefladen, findes på Custommtabsintent docs. Et eksempel på, hvordan du tilføjer en brugerdefineret værktøjslinjefarve følger:

tilslutning til tjenesten Custom Tabs #

tjenesten Custom Tabs kan bruges på samme måde som andre Android-tjenester er. Interfacet er oprettet med AIDL og opretter automatisk en fuldmægtig serviceklasse for dig.

brug metoderne på fuldmægtigetjenesten til opvarmning, oprettelse af sessioner og forudfinding

nyttige Links #

  • Github Demo
  • Chrome Brugerdefinerede faner på Stackoverløb

ofte stillede spørgsmål #

  • Hvornår vil dette være tilgængeligt på stabil kanal?
    • Chrome Brugerdefinerede faner er tilgængelige fra Chrome 45.
  • Hvor kan jeg stille spørgsmål?
    • Stackoverløb tag: chrome-custom-tabs