Chrome Egyéni lapok

BY admin
|

mik azok a Chrome Egyéni lapok? #

az alkalmazásfejlesztők választással szembesülnek, amikor a felhasználó egy URL-re koppintva elindít egy böngészőt, vagy WebViews segítségével elkészíti saját alkalmazáson belüli böngészőjét.

mindkét lehetőség kihívást jelent—a böngésző elindítása nehéz kontextuskapcsoló, amely nem testreszabható, míg a Webnézetek nem osztják meg az állapotot a böngészővel, és karbantartási költségeket jelentenek.

a Chrome Egyéni lapjai lehetővé teszik az alkalmazások számára, hogy jobban ellenőrizzék webes élményüket, és zökkenőmentesebbé tegyék az átmenetet a natív és a webes tartalmak között anélkül, hogy Webnézethez kellene folyamodniuk.

a Chrome Egyéni lapjai lehetővé teszik az alkalmazások számára, hogy testre szabják a Chrome kinézetét és érzését. Egy alkalmazás megváltoztathatja a dolgokat, mint például:

  • eszköztár színe
  • be-és kilépési animációk
  • egyéni műveletek hozzáadása a Chrome eszköztárhoz, a túlcsordulás menühöz és az alsó eszköztárhoz

a Chrome Egyéni lapjai lehetővé teszik a fejlesztő számára a Chrome előzetes indítását és a tartalom előzetes letöltését a gyorsabb betöltés érdekében.

ezt most tesztelheti a Github mintán.

mikor kell használni a Chrome Custom Tabs vs WebView alkalmazást? #

a WebView jó megoldás, ha saját tartalmat tárol az alkalmazásban. Ha az alkalmazás a domainen kívüli URL-ekre irányítja az embereket, javasoljuk, hogy a következő okok miatt használja a Chrome Egyéni lapjait:

  • egyszerű megvalósítani. Nem kell kódot építeni a kérések, az engedélyezési támogatások vagy a cookie-üzletek kezeléséhez.

  • felhasználói felület testreszabása:

    • eszköztár színe
    • akció gomb
    • egyéni menüelemek
    • egyéni be/ki animációk
    • alsó eszköztár

  • navigációs tudatosság: a böngésző visszahívást küld az alkalmazásnak egy külső navigáció után.

  • biztonság: a böngésző a Google Biztonságos böngészését használja, hogy megvédje a felhasználót és az eszközt a veszélyes webhelyektől.

  • teljesítmény optimalizálás:

    • a böngésző előmelegítése a háttérben, elkerülve az erőforrások ellopását az alkalmazásból.
    • valószínű URL megadása előre a böngészőnek, amely spekulatív munkát végezhet, felgyorsítva az oldal betöltési idejét.

  • életciklus-kezelés: a böngésző megakadályozza, hogy az alkalmazást a rendszer kilakoltassa, miközben tetején van, azáltal, hogy fontosságát az “előtér” szintre emeli.

  • a megosztott cookie-jar és az engedélyek modellezik, így a felhasználóknak nem kell bejelentkezniük olyan webhelyekre, amelyekhez már csatlakoztak, vagy újra meg kell adniuk a már megadott engedélyeket.

  • ha a felhasználó bekapcsolta az Adatmentőt, akkor is profitálni fog belőle.

  • szinkronizált Automatikus kiegészítés az eszközök között az űrlap jobb kitöltése érdekében.

  • egyszerű testreszabási modell.

  • gyorsan térjen vissza az alkalmazásba egyetlen érintéssel.

  • a legújabb böngésző implementációkat szeretné használni a Lollipop előtti eszközökön (WebView automatikus frissítése) a régebbi Webviewek helyett.

mikor lesz elérhető? #

a Chrome 45-től kezdve a Chrome Custom Tabs mostantól általánosan elérhető a Chrome összes felhasználója számára, a Chrome összes támogatott Android verzióján (Jellybean-től kezdve).

visszajelzéseket, kérdéseket és javaslatokat keresünk ezzel a projekttel kapcsolatban, ezért javasoljuk, hogy crbug.com tegyen fel kérdéseket a Twitter-fiókunkra @ChromiumDev.

végrehajtási útmutató #

a teljes példa a https://github.com/GoogleChrome/custom-tabs-client címen érhető el. Újrafelhasználható osztályokat tartalmaz a felhasználói felület testreszabásához, a háttérszolgáltatáshoz való csatlakozáshoz, valamint az alkalmazás és az egyéni fül tevékenységének életciklusának kezeléséhez.

ha követi az ezen az oldalon található útmutatást, nagyszerű integrációt hozhat létre.

az Egyéni lapok integrációjának első lépése az Egyéni lapok Támogatási Könyvtárának hozzáadása a projekthez. Nyissa meg a build.gradle fájlt, és adja hozzá a támogatási könyvtárat a függőség szakaszhoz.

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

Miután hozzáadta a támogatási könyvtárat a projekthez, kétféle testreszabás lehetséges:

  • a felhasználói felület testreszabása és az egyéni lapokkal való interakció.
  • az oldal gyorsabb betöltése és az alkalmazás életben tartása.

a felhasználói felület testreszabása a CustomTabsIntent és a CustomTabsIntent.Builder osztályok használatával történik; a teljesítmény javítása a CustomTabsClient használatával érhető el az Egyéni lapok Szolgáltatáshoz való csatlakozáshoz, a Chrome bemelegítéséhez és a megnyitandó URL-ek tájékoztatásához.

Chrome Egyéni lap megnyitása #

a címsor színének beállítása #

a Chrome Egyéni lapok egyik legfontosabb (és legegyszerűbben megvalósítható) szempontja, hogy megváltoztathatja a címsor színét az alkalmazás témájának megfelelően.

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

egyéni művelet gomb beállítása #

az alkalmazás fejlesztőjeként teljes mértékben ellenőrizheti a Chrome lapon a felhasználóknak bemutatott Műveletgombot.

a legtöbb esetben ez egy elsődleges művelet, például Megosztás, vagy egy másik közös tevékenység, amelyet a felhasználók végeznek.

a Művelet Gomb egy csomagként jelenik meg a Művelet Gomb ikonjával és egy pendingintenttel, amelyet a Chrome hív, amikor a felhasználó megnyomja a művelet gombot. Az ikon magassága 24dp, szélessége 24-48 dp.

egyéni menü beállítása #

a Chrome böngésző átfogó menüvel rendelkezik azokról a műveletekről, amelyeket a felhasználók gyakran végeznek a böngészőben, azonban előfordulhat, hogy nem relevánsak az alkalmazás kontextusában.

fejlesztőként legfeljebb öt menüpontot adhat hozzá és szabhat testre, amelyek az ikonsor és a lábelemek között jelennek meg.

a menüpont hozzáadásával hívja CustomTabsIntent.Builder#addMenuItem a cím és a pendingIntent, hogy a Chrome fogja hívni az Ön nevében, amikor a felhasználó megérinti az elemet át paraméterként.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

egyéni be-és kilépési animációk konfigurálása #

számos Android-alkalmazás használ egyéni Nézetbejárási és kilépési animációkat az Android-tevékenységek közötti átmenet során. A Chrome Egyéni lapjai nem különböznek egymástól, megváltoztathatja a be-és kilépési animációkat (amikor a felhasználó megnyomja), hogy azok összhangban legyenek az alkalmazás többi részével.

melegítse fel a Chrome-ot, hogy az oldalak gyorsabban töltődjenek be #

alapértelmezés szerint a CustomTabsIntent#launchUrl meghívásakor a Chrome felpörög, és elindítja az URL-t. Ez értékes időt vehet igénybe, és hatással lehet a simaság érzékelésére.

úgy gondoljuk, hogy a felhasználók szinte azonnali élményt igényelnek, ezért olyan szolgáltatást nyújtottunk a Chrome-ban, amelyhez az alkalmazás csatlakozhat, és megkérheti a Chrome-ot, hogy melegítse fel a böngészőt és a natív összetevőket. Kísérletezünk azzal a képességgel is, hogy a fejlesztő elmondja a Chrome-nak a felhasználó által meglátogatott weboldalak valószínű készletét. A Chrome ezután képes lesz végrehajtani:

  • a fő tartomány DNS előfeloldása
  • a legvalószínűbb alforrások DNS előfeloldása
  • előcsatlakozás a célhoz, beleértve a HTTPS/TLS egyeztetést.

a króm felmelegítésének folyamata a következő:

  • használja a CustomTabsClient#bindCustomTabsService elemet a Szolgáltatáshoz való csatlakozáshoz.
  • miután a szolgáltatás csatlakozott, hívja a CustomTabsClient#warmup telefonszámot a Chrome színfalak mögötti indításához.
  • új munkamenet létrehozásához hívja a CustomTabsClient#newSession parancsot. Ez a munkamenet az API-hoz intézett összes kéréshez használható.
  • opcionálisan csatoljon egy CustomTabsCallback paramétert egy új munkamenet létrehozásakor, hogy tudja, hogy egy oldal betöltődött.
  • mondja meg a Chrome-nak, hogy a felhasználó mely oldalakat fogja betölteni a CustomTabsSession#mayLaunchUrl értékkel.
  • hívja meg a CustomTabsIntent.Builder konstruktort, amely paraméterként átadja a létrehozott CustomTabsSession értéket.

Csatlakozás a Chrome Szolgáltatáshoz #

a CustomTabsClient#bindCustomTabsService módszer megszünteti az Egyéni lapok Szolgáltatáshoz való csatlakozás összetettségét.

hozzon létre egy osztályt, amely kiterjeszti a CustomTabsServiceConnection – et, és használja a onCustomTabsServiceConnected – et a CustomTabsClient példányának megszerzéséhez. Erre a példányra a következő lépésekben lesz szükség.

melegítse fel a böngésző folyamatát #

boolean warmup(long flags)

felmelegíti a böngésző folyamatát és betölti a natív könyvtárakat. A bemelegítés aszinkron, a visszatérési érték azt jelzi, hogy a kérést elfogadták-e. Több sikeres hívás is visszatér igaz.

eredmény true a siker.

új lap munkamenet létrehozása#

boolean newSession(CustomTabsCallback callback)

Session használják a későbbi hívások összekapcsolni maylaunchurl hívás, a CustomTabsIntent és a lap generált egymással. Az itt megadott visszahívás a létrehozott munkamenethez kapcsolódik. A létrehozott munkamenet frissítései (lásd alább az Egyéni lapok visszahívását)szintén ezen a visszahíváson keresztül érkeznek. Visszaadja, hogy a munkamenet sikeresen létrejött-e. Több hívás ugyanazzal a CustomTabsCallback vagy null értékkel hamis értéket ad vissza.

mondja el a Chrome-nak, hogy a felhasználó milyen URL-címet fog megnyitni #

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

ez a CustomTabsSession módszer megmondja a böngészőnek egy valószínű jövőbeli navigációt egy URL-re. A warmup() módszert először a legjobb gyakorlatnak kell nevezni. Először a legvalószínűbb URL-t kell megadni. Opcionálisan más valószínű URL-ek listája is megadható. Kevésbé valószínűnek tekintik őket, mint az elsőt, és csökkenő prioritási sorrendbe kell sorolni őket. Ezek a további URL-ek figyelmen kívül hagyhatók. Minden korábbi hívás erre a módszerre lesz megfosztva. Visszaadja, hogy a művelet sikeresen befejeződött-e.

Egyéni lapok kapcsolat visszahívása #

void onNavigationEvent(int navigationEvent, Bundle extras)

a rendszer akkor hívja meg, amikor navigációs esemény történik az egyéni lapon. A ‘navigationEvent int’ a 6 érték egyike, amely meghatározza az oldal állapotát. További információkért lásd alább.

mi történik, ha a felhasználónak nincs telepítve a Chrome legújabb verziója? #

az Egyéni lapok egy ACTION_VIEW szándékot használnak a legfontosabb extrákkal a felhasználói felület testreszabásához. Ez azt jelenti, hogy alapértelmezés szerint az oldal leszmegnyílik a rendszerböngészőben vagy a felhasználó alapértelmezett böngészőjében.

ha a felhasználó telepítette a Chrome-ot, és ez az alapértelmezett böngésző, akkor automatikusan felveszi az extrákat, és testreszabott felhasználói felületet mutat be. Az is lehetséges, hogy egy másik böngésző használja az Intent extrákat, hogy hasonló testreszabott felületet biztosítson.

Hogyan ellenőrizhetem, hogy a Chrome támogatja-e a Chrome Egyéni lapjait? #

a Chrome Custom Tabs-ot támogató összes Chrome-verzió egy szolgáltatást tárt fel. Annak ellenőrzéséhez, hogy a Chrome támogatja-e az egyéni lapokat, próbáljon meg kötődni a szolgáltatáshoz. Ha sikerül, akkor az Egyéni lapok biztonságosan használhatók.

legjobb gyakorlatok #

a Chrome Custom Tabs elindítása óta különböző minőségű megvalósításokat láttunk. Ez a szakasz a jó integráció létrehozására talált bevált gyakorlatokat ismerteti.

Csatlakozás az Egyéni lapok szolgáltatáshoz és hívás warmup() #

akár 700 ms-ot is megtakaríthat, ha megnyit egy linket az egyéni lapokkal a Szolgáltatáshoz való csatlakozással és a Chrome előzetes betöltésével.

csatlakozzon az Egyéni lapok szolgáltatáshoz azon tevékenységek onStart() metódusán, amelyekről egyéni lapot kíván indítani. Csatlakozás után hívja a bemelegítést ().

a betöltés alacsony prioritású folyamatként történik, ami azt jelenti, hogy nem lesz negatív teljesítményhatása az alkalmazásra, de nagy teljesítménynövekedést eredményez egy link betöltésekor.

Pre-render content #

az előzetes renderelés a külső tartalmat azonnal megnyitja. Tehát, mintha a Felhasználó legalább 50% – os valószínűséggel kattintana a linkre, hívja a mayLaunchUrl() módszert.

a mayLaunchUrl() hívásával az Egyéni lapok előhívják a főoldalt a támogató tartalommal és előrendereléssel. Ez megadja a maximális sebességet az oldal betöltési folyamatához, de hálózati és akkumulátorköltséggel jár.

a Custom Tabs intelligens, és tudja, hogy a felhasználó mért hálózaton használja-e a telefont, vagy alacsony kategóriájú eszközről van-e szó, és az elő-renderelés negatív hatással lesz az eszköz általános teljesítményére, és nem fog elő-letölteni vagy elő-renderelni ezeken a forgatókönyveken. Tehát nincs szükség az alkalmazás optimalizálására ezekben az esetekben.

tartalék lehetőséget biztosít arra az esetre, ha az Egyéni lapok nincsenek telepítve #

bár az Egyéni lapok a felhasználók nagy többsége számára elérhetők, vannak olyan esetek, amikor az egyéni lapokat támogató böngésző nincs telepítve az eszközre, vagy az eszköz nem támogatja az egyéni lapokat engedélyező böngészőverziót.

győződjön meg róla, hogy egy tartalék, amely egy jó felhasználói élményt akár megnyitja az alapértelmezett böngésző vagy használja a saját WebView végrehajtását.

adja hozzá az alkalmazást hivatkozóként #

általában nagyon fontos, hogy a webhelyek nyomon kövessék, honnan érkezik a forgalom. Győződjön meg róla, hogy tudassa velük, hogy felhasználókat küld nekik, ha beállítja a hivatkozót az egyéni lap indításakor

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

egyéni animációk hozzáadása #

az egyéni animációk simábbá teszik az alkalmazást a webes tartalomra. Győződjön meg arról, hogy a Befejezés animáció A kezdő animáció fordítottja, mivel ez segít a felhasználónak megérteni, hogy visszatér a tartalomhoz, ahol a navigáció elindult.

ikon kiválasztása a művelet gombhoz #

egy művelet gomb hozzáadása a felhasználókat jobban bevonja az alkalmazás funkcióiba. De ha nincs jó ikon, amely a Művelet Gomb által végrehajtott műveletet ábrázolná, hozzon létre egy bitképet a műveletet leíró szöveggel.

ne feledje, hogy a bitkép maximális mérete 24dp magasság x 48dp szélesség.

felkészülés más böngészőkre #

ne feledje, hogy a felhasználónak több olyan böngészője is lehet, amely támogatja az egyéni lapokat. Ha egynél több böngésző támogatja az egyéni lapokat, és egyik sem, ha azok a preferált böngésző, kérdezze meg a felhasználót, hogyan szeretné megnyitni a linket

engedélyezze a felhasználó számára az Egyéni lapok letiltását #

adjon hozzá egy lehetőséget az alkalmazásba, hogy a felhasználó egyéni lap használata helyett az alapértelmezett böngészőben nyissa meg a hivatkozásokat. Ez különösen akkor fontos, ha az alkalmazás a böngésző segítségével nyitotta meg a linket, mielőtt támogatást adna az egyéni lapokhoz.

hagyja, hogy a natív alkalmazások kezeljék a tartalmat #

egyes URL-eket natív alkalmazások kezelhetnek. Ha a felhasználó telepítette a Twitter alkalmazást, és rákattint egy tweetre mutató linkre. Arra számít, hogy a Twitter alkalmazás kezelni fogja.

mielőtt megnyitna egy url-t az alkalmazásból, ellenőrizze, hogy rendelkezésre áll-e natív alternatíva, és használja azt.

testreszabhatja az eszköztár színét #

testreszabhatja az alkalmazás elsődleges színét, ha azt szeretné, hogy a felhasználó úgy érezze, hogy a tartalom az alkalmazás része.

ha egyértelművé szeretné tenni a felhasználó számára, hogy elhagyta az alkalmazását, egyáltalán ne szabja testre a színt.

megosztási Művelet hozzáadása #

győződjön meg róla, hogy hozzáadta a megosztási műveletet a túlcsordulási menühöz, mivel a felhasználók elvárják, hogy a legtöbb Használati esetben megoszthassák a megtekintett tartalomra mutató hivatkozást, és az Egyéni lapok alapértelmezés szerint nem adnak hozzá egyet.

testreszabhatja a bezárás gombot #

testreszabhatja a bezárás gombot, hogy az egyéni fül úgy érezze, hogy az alkalmazás része.

ha azt szeretné, hogy a felhasználó úgy érezze, hogy az Egyéni lapok modális párbeszédpanelek, használja az alapértelmezett “X” gombot. Ha azt szeretné, hogy a felhasználó úgy érezze, hogy az egyéni lap az alkalmazásfolyamat része, használja a vissza nyilat.

kezelje a belső linkeket #

az android által generált linkekre történő kattintások elfogásakor:autoLink vagy a webnézetekben található linkekre történő kattintások felülbírálása, győződjön meg arról, hogy az alkalmazás kezeli a belső linkeket, az Egyéni lapok pedig a külsőket.

több kattintás kezelése #

ha bármilyen feldolgozást kell végrehajtania a hivatkozásra kattintó felhasználó és az egyéni lap megnyitása között, győződjön meg róla, hogy az 100 ms alatt fut. ellenkező esetben az emberek látni fogják a nem reagálást, és megpróbálhatnak többször kattintani a linkre.

ha nem lehet elkerülni a késleltetést, győződjön meg arról, hogy az alkalmazás készen áll arra, hogy a felhasználó többször rákattintson ugyanarra a hivatkozásra, és nem nyit meg többször egyéni lapot.

alacsony szintű API #

bár az alkalmazás egyéni lapokkal való integrálásának ajánlott módszere az Egyéni lapok Támogatási Könyvtárának használata, alacsony szintű megvalósítás is elérhető.

a támogatási könyvtár teljes implementációja elérhető a Githubon, és kiindulópontként használható. Tartalmazza a Szolgáltatáshoz való csatlakozáshoz szükséges AIDL fájlokat is, mivel a Chromium adattárban található fájlok nem használhatók közvetlenül az Android Studio-val.

az Egyéni lapok indításának alapjai az alacsony szintű API használatával #

felhasználói felület testreszabásának hozzáadása #

a felhasználói felület testreszabását az ACTION_VIEW szándék extrák hozzáadásával tartalmazza. A felhasználói felület testreszabásához használt extrakulcsok teljes listája megtalálható a CustomTabsIntent dokumentumokban. Az egyéni eszköztár színének hozzáadására példa következik:

Csatlakozás az Egyéni lapok szolgáltatáshoz #

az Egyéni lapok szolgáltatás ugyanúgy használható, mint más Android szolgáltatások. Az interfész az AIDL-lel jön létre, és automatikusan létrehoz egy proxy szolgáltatási osztályt az Ön számára.

használja a proxy szolgáltatás módszereit a bemelegítéshez, munkamenetek létrehozásához és a

hasznos linkek előhívásához #

  • Github Demo
  • Chrome Egyéni lapok a StackOverflow-n

GYIK #

  • mikor lesz elérhető a stabil csatornán?
    • a Chrome Egyéni lapjai a Chrome 45-től érhetők el.
  • hol kérdezhetek?
    • Stackoverflow címke: chrome-Egyéni lapok