Chrome Custom Tabs

BY admin
|

Mitä ovat Chrome Custom Tabs? #

sovelluskehittäjien on tehtävä valinta, Kun käyttäjä napauttaa URL-osoitetta käynnistääkseen selaimen tai rakentaakseen oman sovelluksen sisäisen selaimensa Webviewsin avulla.

molemmissa vaihtoehdoissa on haasteita—selaimen käynnistäminen on raskas kontekstikytkin, joka ei ole muokattavissa, kun taas Webviewit eivät jaa Tilaa selaimen kanssa ja lisää ylläpitokustannuksia.

Chrome Custom-välilehdet antavat sovelluksille enemmän kontrollia niiden web-kokemukseen ja tekevät siirtymisestä natiivin ja web-sisällön välillä saumattomampaa ilman, että tarvitsee turvautua WebView ’ hun.

Chrome Custom-välilehtien avulla sovellus voi muokata, miltä Chrome näyttää ja tuntuu. Sovellus voi muuttaa asioita, kuten:

  • työkalupalkin väri
  • Enter – ja exit-animaatiot
  • lisää mukautettuja toimintoja Chrome toolbar-työkalupalkkiin, ylivuoto-valikkoon ja bottom toolbar

Chrome Custom-välilehtien avulla kehittäjä voi myös käynnistää Chromen etukäteen ja noutaa sisällön nopeammaksi lataamiseksi.

voit testata tämän nyt otoksellamme GitHubissa.

Milloin minun pitäisi käyttää Chrome Custom Tabs vs WebView? #

WebView on hyvä ratkaisu, jos isännöit omaa sisältöä sovelluksesi sisällä. Jos sovelluksesi ohjaa ihmisiä verkko-osoitteisiin verkkotunnuksesi ulkopuolella, suosittelemme, että käytät Chrome Custom-välilehtiä näistä syistä:

  • helppo toteuttaa. Ei tarvitse rakentaa koodia pyyntöjen, lupa-avustusten tai evästevarastojen hallintaan.

  • käyttöliittymän muokkaus:

    • työkalupalkin väri
    • toimintopainike
    • omat valikkokohteet
    • omat in / out-animaatiot
    • Alatyökalupalkin

  • Navigointitietoisuus: selain lähettää takaisinkutsun sovellukseen ulkoisen navigoinnin yhteydessä.

  • tietoturva: selain käyttää Googlen Selausturvaa käyttäjän ja laitteen suojaamiseen vaarallisilta sivustoilta.

  • suorituskyvyn optimointi:

    • selaimen esilämmittäminen taustalla, samalla kun vältetään resurssien varastaminen sovelluksesta.
    • todennäköisen URL-osoitteen tarjoaminen etukäteen selaimelle, joka saattaa tehdä spekulatiivista työtä, mikä nopeuttaa sivujen latausaikaa.

  • elinkaaren hallinta: selain estää sovelluksen häätämisen järjestelmän ollessa sen päällä nostamalla sen merkityksen ”etualalle” tasolle.

  • jaettu evästepurkki ja käyttöoikeusmalli, jotta käyttäjien ei tarvitse kirjautua sivustoille, joihin he ovat jo yhteydessä, tai myöntää uudelleen jo myöntämiään oikeuksia.

  • jos käyttäjä on ottanut Datasäästäjän käyttöön, hän hyötyy siitä edelleen.

  • synkronoitu automaattinen täydennys laitteiden välillä paremman lomakkeen täyttämiseksi.

  • yksinkertainen räätälöintimalli.

  • palaa nopeasti sovellukseen yhdellä napautuksella.

  • haluat käyttää viimeisimpiä selaintoteutuksia Lollipopia edeltävillä laitteilla (Automaattinen WebView-päivitys) vanhempien Webviewien sijaan.

milloin se on saatavilla? #

Chrome 45: stä lähtien Chrome Custom Tabs on nyt yleisesti kaikkien Chromen käyttäjien saatavilla kaikissa Chromen tuetuissa Android-versioissa (Jellybean alkaen).

haemme palautetta, kysymyksiä ja ehdotuksia tästä projektista, joten kehotamme sinua tiedostamaan crbug.com ja esittää kysymyksiä Twitter-tilillemme @ChromiumDev.

soveltamisopas #

täydellinen esimerkki löytyy osoitteesta https://github.com/GoogleChrome/custom-tabs-client. Se sisältää uudelleenkäytettäviä luokkia käyttöliittymän mukauttamiseksi, yhteyden muodostamiseksi taustapalveluun ja sekä sovelluksen että mukautetun välilehden toiminnan elinkaaren käsittelemiseksi.

jos noudatat tämän sivun ohjeita, voit luoda suuren integraation.

ensimmäinen vaihe mukautettujen välilehtien integroinnissa on mukautetun välilehtien Tukikirjaston lisääminen projektiin. Avaa build.gradle – tiedostosi ja lisää tukikirjasto riippuvuusosioon.

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

kun tukikirjasto on lisätty projektiin, on olemassa kaksi sarjaa mahdollisia muokkauksia:

  • käyttöliittymän muokkaaminen ja vuorovaikutus mukautettujen välilehtien kanssa.
  • sivun lataaminen nopeammin ja sovelluksen pitäminen elossa.

käyttöliittymän muokkaukset tehdään käyttämällä CustomTabsIntent-ja CustomTabsIntent.Builder – luokkia; suorituskykyparannukset saavutetaan käyttämällä CustomTabsClient – laitetta, joka muodostaa yhteyden Custom Tabs-palveluun, lämmittää Chromea ja ilmoittaa, mitkä URL-osoitteet avataan.

Chrome Custom-välilehden avaaminen #

osoiterivin värin määrittäminen #

yksi tärkeimmistä (ja yksinkertaisimmista toteuttaa) Chrome Custom-välilehtien näkökohdista on kyky muuttaa osoiterivin väriä vastaamaan sovelluksesi teemaa.

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

Määritä oma toimintopainike #

sovelluskehittäjänä sinulla on täysi kontrolli Toimintopainikkeesta, joka esitetään käyttäjillesi Chrome-välilehden sisällä.

useimmissa tapauksissa tämä on ensisijainen toiminto, kuten Jaa, tai muu yleinen toiminto, jonka käyttäjät suorittavat.

toimintopainike esitetään nippuna, jossa on toimintopainikkeen kuvake ja pendingintentti, jota Chrome kutsuu käyttäjän painaessa toimintopainiketta. Kuvake on currenty 24dp korkeus ja 24-48 dp leveys.

Määritä oma valikko #

Chrome-selaimessa on kattava valikko toimintoja, joita käyttäjät suorittavat usein selaimen sisällä, mutta niillä ei välttämättä ole merkitystä sovelluksessasi.

kehittäjänä voit lisätä ja muokata enintään viisi valikkoa, jotka ilmestyvät kuvakerivin ja jalkakohteiden väliin.

valikon kohta lisätään soittamalla CustomTabsIntent.Builder#addMenuItem otsikolla ja pendingintentillä, jonka Chrome soittaa puolestasi, kun käyttäjä näppäilee kohteen ohitetaan parametreina.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Configure custom enter and exit animations #

monet Android-sovellukset käyttävät custom View Entrance-ja Exit-animaatioita siirryttäessä toimintojen välillä Androidissa. Chrome Custom Tabs ei ole erilainen, voit muuttaa sisäänkäynti ja poistu (kun käyttäjä painaa takaisin) animaatioita pitää ne yhdenmukaisina muun sovelluksen.

lämmitä Chromea, jotta sivut latautuvat nopeammin #

oletusarvoisesti, kun CustomTabsIntent#launchUrl kutsutaan, se pyörittää Chromea ja käynnistää URL-osoitteen. Tämä voi viedä arvokasta aikaa ja vaikuttaa tasaisuuden hahmottamiseen.

uskomme, että käyttäjät vaativat lähes välitöntä kokemusta, joten olemme tarjonneet Chromessa palvelun, johon sovelluksesi voi muodostaa yhteyden ja käskeä Chromea lämmittämään selaimen ja alkuperäiset komponentit. Kokeilemme myös kykyä sinulle, kehittäjä kertoo Chromelle todennäköiset verkkosivut, joilla käyttäjä vierailee. Tämän jälkeen Chrome pystyy suorittamaan:

  • DNS esiresoluutio pääkohteesta
  • DNS esiresoluutio todennäköisimmistä aliresursseista
  • Pre-yhteys kohteeseen mukaan lukien HTTPS / TLS-neuvottelu.

kromin lämpeneminen tapahtuu seuraavasti:

  • käytä CustomTabsClient#bindCustomTabsService liittyäksesi palveluun.
  • kun palvelu on kytketty, soita CustomTabsClient#warmup käynnistääksesi Chromen kulissien takana.
  • Soita CustomTabsClient#newSession Luo uusi istunto. Tätä istuntoa käytetään kaikkiin API: n pyyntöihin.
  • voit valinnaisesti liittää parametriksi CustomTabsCallback, kun luot uutta istuntoa, jotta tiedät, että sivu on ladattu.
  • kerro Chromelle, mitkä sivut käyttäjä todennäköisesti lataa CustomTabsSession#mayLaunchUrl: llä.
  • kutsu parametriksi CustomTabsIntent.Builder konstruktoria, joka ohittaa luodun CustomTabsSession.

Yhdistä Chrome-palveluun #

CustomTabsClient#bindCustomTabsService – menetelmä poistaa mukautetun Tabs-palvelun yhdistämisen monimutkaisuuden.

Luo luokka, joka ulottuu CustomTabsServiceConnection ja käytä onCustomTabsServiceConnected saadaksesi instanssin CustomTabsClient. Tätä instanssia tarvitaan seuraavissa vaiheissa.

lämmitä Selainprosessi #

boolean warmup(long flags)

lämmittää selainprosessia ja lataa natiivikirjastot. Lämmittely on asynkroninen, palautusarvo ilmaisee, onko pyyntö hyväksytty. Useat onnistuneet puhelut myös palaavat true.

palaa true menestykseen.

Luo uusi välilehtistunto #

boolean newSession(CustomTabsCallback callback)

istuntoa käytetään myöhemmissä kutsuissa yhdistämään mayLaunchUrl-puhelu, CustomTabsIntent ja luotu välilehti toisiinsa. Tässä esitetty takaisinsoitto liittyy luotuun istuntoon. Kaikki luodun istunnon päivitykset (Katso mukautetut välilehdet Callback alla) vastaanotetaan myös tämän takaisinsoiton kautta. Palauttaa, onko istunto luotu onnistuneesti. Useita puheluita, joilla on sama CustomTabsCallback tai nolla-arvo, palauttaa false.

kerro Chromelle, minkä URL-osoitteen käyttäjä todennäköisesti avaa #

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

tämä CustomTabsSession-menetelmä kertoo selaimelle todennäköisen tulevan navigoinnin URL-osoitteeseen. Menetelmää warmup() tulisi kutsua ensimmäiseksi hyväksi käytännöksi. Todennäköisin URL on määritettävä ensin. Valinnaisesti voidaan toimittaa luettelo muista todennäköisistä URL-osoitteista. Niitä pidetään epätodennäköisempinä kuin ensimmäistä, ja ne on lajiteltava alenevaan prioriteettijärjestykseen. Nämä ylimääräiset URL-osoitteet voidaan jättää huomiotta. Kaikki aiemmat puhelut tähän menetelmään riistetään. Palauttaa, onko operaatio suoritettu onnistuneesti.

omat välilehdet yhteyden takaisinsoitto #

void onNavigationEvent(int navigationEvent, Bundle extras)

kutsutaan, kun navigointitapahtuma tapahtuu mukautettu-välilehdessä. NavigationEvent int on yksi 6 arvoista, jotka määrittävät tilan sivu on. Katso lisätietoja alta.

mitä tapahtuu, jos käyttäjällä ei ole asennettuna Chromen tuoretta versiota? #

Custom Tabs käyttää ACTION_VIEW Intent-toimintoa, jossa on avainlisät käyttöliittymän mukauttamiseksi. Tämä tarkoittaa, että sivu avautuu oletusarvoisesti järjestelmäselaimessa tai käyttäjän oletusselaimessa.

jos käyttäjällä on Chrome asennettuna ja se on oletusselain, se poimii automaattisesti Ekstrat ja esittää räätälöidyn käyttöliittymän. On myös mahdollista, että toinen selain käyttää Intent extroja tarjoamaan samanlaisen räätälöidyn käyttöliittymän.

Miten voin tarkistaa, tukeeko Chrome Chrome Custom-välilehtiä? #

kaikki Chromen kustomoituja välilehtiä tukevat versiot paljastavat palvelun. Jos haluat tarkistaa, tukeeko Chrome mukautettuja välilehtiä, yritä sitoutua palveluun. Jos se onnistuu, niin mukautettuja välilehtiä voidaan turvallisesti käyttää.

Best Practices #

Chrome Custom Tabs: n lanseerauksen jälkeen on nähty erilaisia toteutuksia, joiden laatu vaihtelee. Tässä osiossa kuvataan joukko parhaita käytäntöjä, jotka olemme löytäneet hyvän integraation luomiseksi.

Yhdistä mukautettuihin välilehtiin ja soita lämmittelyyn() #

voit säästää jopa 700 ms, Kun avaat linkin mukautettuihin välilehtiin liittymällä palveluun ja lataamalla Chromen valmiiksi.

Yhdistä mukautetut välilehdet-palveluun onStart () – menetelmällä, josta aiot käynnistää mukautetun välilehden. Yhteyden yhteydessä kutsutaan lämmittelyä ().

lataus tapahtuu matalan prioriteetin prosessina, mikä tarkoittaa, että sillä ei ole negatiivista vaikutusta sovellukseen, mutta se antaa suuren suorituskyvyn Boostin linkin lataamisessa.

Esirenderöintisisältö #

Esirenderöinti saa ulkoisen sisällön avautumaan välittömästi. Joten, ikään kuin käyttäjällä olisi vähintään 50% todennäköisyys klikkaamalla linkkiä, soita mayLaunchUrl () – menetelmään.

soittamalla maylaunchurlille() tehdään mukautetut välilehdet valmiiksi noutamaan Pääsivu tukisisältöineen ja esirenderöinteineen. Tämä antaa suurin nopeus jopa sivun latausprosessi, mutta mukana verkko ja akun kustannukset.

Custom Tabs on älykäs ja tietää, käyttääkö käyttäjä puhelinta mitatussa verkossa vai onko kyseessä halvemman tason laite ja esirenderöinti vaikuttaa negatiivisesti laitteen yleiseen suorituskykyyn, eikä esirenderöidä tai esirenderöidä kyseisissä skenaarioissa. Niin, ei tarvitse optimoida sovelluksen näihin tapauksiin.

tarjoa varasuunnitelma, kun mukautettuja välilehtiä ei ole asennettu #

vaikka mukautetut välilehdet ovat saatavilla suurimmalle osalle käyttäjistä, on olemassa tilanteita, joissa mukautettuja välilehtiä tukevaa selainta ei ole asennettu laitteeseen tai laite ei tue selainversiota, jossa mukautetut välilehdet ovat käytössä.

varmista, että voit tarjota hyvän käyttökokemuksen tarjoavan varasuunnitelman joko avaamalla oletusselaimen tai käyttämällä omaa WebView-toteutustasi.

Add your app as the referer #

on yleensä hyvin tärkeää, että verkkosivut seuraavat, mistä niiden liikenne tulee. Varmista, että ilmoitat heille, että lähetät heille käyttäjiä asettamalla suosittelijan käynnistäessäsi mukautetun välilehden

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

Add custom animations #

Custom animations tekee siirtymisestä sovelluksesta verkkosisältöön sujuvampaa. Varmista, että lopetusanimaatio on alkuanimaation kääntöpuoli, sillä se auttaa käyttäjää ymmärtämään palaavansa sisältöön, josta navigointi alkoi.

valitsemalla kuvake Toimintopainikkeelle #

toimintopainikkeen lisääminen saa käyttäjät käyttämään enemmän sovelluksen ominaisuuksia. Mutta jos ei ole hyvää kuvaketta, joka edustaa Toimintopainikkeesi suorittamaa toimintaa, Luo bittikartta, jossa on toimintaa kuvaava teksti.

muista, että bittikartan enimmäiskoko on 24dp korkeus x 48dp leveys.

valmistautuminen muille selaimille #

muista, että käyttäjällä voi olla asennettuna useampi kuin yksi selain, joka tukee mukautettuja välilehtiä. Jos on useampi kuin yksi selain, joka tukee mukautettuja välilehtiä, eikä yksikään, jos ne ovat ensisijainen selain, kysy käyttäjältä, miten hän haluaa avata linkin

Salli käyttäjän kieltäytyä mukautetuista välilehdistä #

lisää sovellukseen vaihtoehto, jolla käyttäjä voi avata linkkejä oletusselaimessa mukautetun välilehden sijaan. Tämä on erityisen tärkeää, jos sovellus avasi linkin selaimella ennen tuen lisäämistä mukautetuille välilehdille.

anna natiivisovellusten käsitellä sisältöä #

joitakin URL-osoitteita voidaan käsitellä natiivisovelluksilla. Jos käyttäjä on Twitter-sovellus asennettuna ja napsauttaa linkkiä twiittiin. Hän odottaa, että Twitter-sovellus hoitaa asian.

ennen kuin avaat URL-osoitteen hakemuksestasi, tarkista, onko alkuperäinen vaihtoehto käytettävissä ja käytä sitä.

Mukauta työkalupalkin väri #

Mukauta sovelluksen päävärillä, jos haluat käyttäjän tuntevan, että sisältö on osa sovellusta.

jos haluat tehdä käyttäjälle selväksi, että hän on jättänyt sovelluksesi, älä muokkaa väriä lainkaan.

lisää jakotoiminto #

varmista, että lisäät jakotoiminnon ylivuotovalikkoon, sillä käyttäjät odottavat voivansa jakaa linkin näkemäänsä sisältöön useimmissa käyttötapauksissa, eivätkä mukautetut välilehdet oletusarvoisesti lisää sellaista.

Mukauta Sulje-painiketta #

Mukauta Sulje-painiketta, jotta mukautettu välilehti tuntuu siltä, että se on osa sovellustasi.

jos haluat käyttäjän tuntevan, että mukautetut välilehdet ovat Modaalinen dialogi, käytä oletusarvo ”X” – painiketta. Jos haluat käyttäjän tuntevan, että mukautettu välilehti on osa sovelluksen virtausta, käytä takanuolta.

Handle internal links #

When intercepting clicks on links created by android:autoLink or overwising clicks on links on WebViews, make sure that your application handles the internal links and let ’ s Custom Tabs handle the external ones.

käsittele useita napsautuksia #

jos sinun on tehtävä jokin käsittely käyttäjän napsauttamalla linkkiä ja avaamalla mukautettu välilehti, varmista, että se toimii alle 100ms. muussa tapauksessa ihmiset näkevät reagoimattomuuden ja voivat yrittää klikata linkkiä useita kertoja.

jos viivettä ei ole mahdollista välttää, varmista, että sovellus on valmis, kun käyttäjä napsauttaa useita kertoja samaa linkkiä eikä avaa mukautettua välilehteä useita kertoja.

Low level API #

vaikka suositeltu tapa integroida sovellus mukautettuihin välilehtiin on mukautettu välilehtien Tukikirjasto, on myös matalan tason toteutus saatavilla.

Tukikirjaston täydellinen toteutus on saatavilla GitHubissa ja sitä käytetään aloituspisteenä. Se sisältää myös palveluun yhdistämiseen tarvittavat AIDL-tiedostot, sillä Chromium-arkiston sisältämät tiedostot eivät ole suoraan käytettävissä Android Studion kanssa.

perusteet mukautettujen välilehtien käynnistämiseen matalan tason API: lla #

KÄYTTÖLIITTYMÄRATKAISUJEN lisääminen #

KÄYTTÖLIITTYMÄRATKAISUT sisältyvät lisäämällä ekstroja ACTION_VIEW-Intentiin. Täydellinen luettelo käyttöliittymän muokkaamiseen käytetyistä lisäavaimista löytyy CustomTabsIntent docs-sivustolta. Esimerkki mukautetun työkalupalkin värin lisäämisestä seuraa:

liittäminen Custom Tabs-palveluun #

Custom Tabs-palvelua voi käyttää samalla tavalla kuin muita Android-palveluita. Käyttöliittymä luodaan AIDL: llä ja luo automaattisesti välityspalveluluokan sinulle.

käytä välityspalvelun menetelmiä lämmittelyyn, istuntojen luomiseen ja ennakkohakuun

hyödyllisiä linkkejä #

  • Github Demo
  • Chrome Custom Tabs on StackOverflow

FAQ #

  • milloin tämä on katsottavissa tallikanavalla?
    • Chrome Custom-välilehdet ovat saatavilla Chrome 45: stä alkaen.
  • missä voin kysellä?
    • Stackoverflow tag: chrome-custom-tabs