Chrome Custom Tabs

BY admin

| 27 ledna, 2022

co jsou Chrome Custom Tabs? #

vývojáři aplikací čelí volbě, když uživatel klepne na adresu URL, aby buď spustil prohlížeč, nebo vytvořil svůj vlastní prohlížeč v aplikaci pomocí WebViews.

Obě možnosti současné problémy—spuštění prohlížeče je těžké přepnutí kontextu, které není nastavitelné, zatímco WebViews nesdílejí státu prohlížeče a přidat údržba nad hlavou.

Chrome Vlastní Karty dát aplikací větší kontrolu nad jejich webových zkušenosti, a zajistit, aby se přechody mezi nativní a webové obsah, bezešvé, aniž by se museli uchýlit k WebView.

vlastní karty Chrome umožňují aplikaci přizpůsobit vzhled a pocit Chromu. Aplikace může změnit věci, jako je:

panel Nástrojů barva
Vstup a výstup animace
Přidat vlastní akce k Chrome toolbar, menu přetečení a dolní panel nástrojů

Chrome Vlastní Karty také umožňují developer, aby pre-start Chrome a pre-fetch obsah pro rychlejší načítání.

můžete to vyzkoušet nyní s naším vzorkem na Githubu.

kdy mám používat Chrome Custom Tabs vs WebView? #

WebView je dobrým řešením, pokud hostujete svůj vlastní obsah uvnitř aplikace. Pokud vaše aplikace přesměruje lidi na adresy URL mimo vaši doménu, doporučujeme z těchto důvodů použít vlastní karty Chrome:

jednoduché provedení. Není třeba vytvářet kód pro správu požadavků, udělování oprávnění nebo ukládání souborů cookie.
uživatelské rozhraní přizpůsobení:
- panel Nástrojů barva
- Akční tlačítko
- Vlastní položky menu
- Vlastní in/out animace
- Spodní panel nástrojů
Navigace povědomí: prohlížeče přináší zpětné volání aplikace na externí navigaci.
zabezpečení: prohlížeč používá Bezpečné prohlížení Google k ochraně uživatele a zařízení před nebezpečnými weby.
optimalizace Výkonu:
- Pre-oteplování Prohlížeče v pozadí, zatímco vyhýbání se krást zdroje z aplikace.
- poskytnutí pravděpodobného URL předem do prohlížeče, který může provádět spekulativní práci, což urychluje čas načítání stránky.
správa životního cyklu: prohlížeč zabraňuje vystěhování aplikace systémem, zatímco je nad ním, zvýšením jeho důležitosti na úroveň“ popředí“.
Sdílené cookie jar a model oprávnění, takže uživatelé nemusí se přihlásit na stránky, které jsou již připojeny, nebo znovu udělit oprávnění již uděleno.
pokud uživatel Zapnul Spořič dat, bude z něj stále těžit.
synchronizované Automatické dokončování napříč zařízeními pro lepší vyplnění formuláře.
jednoduchý model přizpůsobení.
rychle se vraťte do aplikace jediným klepnutím.
chcete použít nejnovější implementace prohlížeče na zařízeních pre-Lollipop (automatická aktualizace WebView) místo starších WebViews.

kdy to bude k dispozici? #

jak Chrome 45, Chrome Custom Tabs je nyní obecně k dispozici všem uživatelům Chrome, na všech Chrome podporovaných verzí Android (Jellybean kupředu).

hledáme zpětnou vazbu, dotazy a návrhy týkající se tohoto projektu, proto Vám doporučujeme podat problémy na crbug.com a zeptejte se na náš Twitter účet @ChromiumDev.

průvodce implementací #

kompletní příklad je k dispozici na https://github.com/GoogleChrome/custom-tabs-client. Obsahuje znovu použitelné třídy pro přizpůsobení uživatelského rozhraní, připojení ke Službě na pozadí a zpracování životního cyklu aplikace i činnosti vlastní karty.

pokud budete postupovat podle pokynů z této stránky, budete moci vytvořit skvělou integraci.

prvním krokem pro integraci vlastních karet je přidání knihovny podpory vlastních karet do vašeho projektu. Otevřete soubor build.gradle a přidejte knihovnu podpory do sekce závislost.

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

jakmile je knihovna podpory přidána do vašeho projektu, existují dvě sady možných úprav:

přizpůsobení uživatelského rozhraní a interakce s vlastními kartami.
zrychlení načítání stránky a udržení aplikace naživu.

UI Přizpůsobení se provádí pomocí CustomTabsIntent a CustomTabsIntent.Builder třídy; zlepšení výkonu je dosaženo pomocí CustomTabsClient připojit k Vlastní Záložky služby, warm-up Chrome a nechat ji vědět, které adresy url, bude otevřeno.

Otevření Chrome Custom Tab #

Nastavit barvu adresního řádku #

Jeden z nejdůležitější (a nejjednodušší na implementaci) aspekty Chrome Vlastní Karty je možnost změnit barvu panelu adresa musí být v souladu s vaší aplikace téma.

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

Konfigurovat vlastní tlačítko akce #

Jako vývojář aplikace, máte plnou kontrolu nad Tlačítko Akce, které jsou prezentovány uživatelům uvnitř Chrome tab.

ve většině případů se jedná o primární akci, jako je sdílení, nebo jinou běžnou aktivitu, kterou budou uživatelé provádět.

Tlačítko Akce je prezentován jako Balíček s ikonou akčního tlačítka a pendingIntent, který se bude jmenovat Chrome, když váš uživatel klikne na tlačítko akce. Ikona je currently 24dp na výšku a 24-48 dp na šířku.

Konfigurovat vlastní menu #

prohlížeč Chrome má komplexní nabídka akcí, které budou uživatelé provádět často uvnitř prohlížeče, však, že nemusí být relevantní pro vaši aplikaci kontextu.

jako vývojář můžete přidat a přizpůsobit až pět položek nabídky, které se objeví mezi řádkem ikon a položkami nohou.

položka nabídky je přidána voláním CustomTabsIntent.Builder#addMenuItem s názvem a pendingIntent, který Chrome zavolá vaším jménem, když uživatel klepne na položku, jsou předány jako parametry.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

nakonfigurujte vlastní animace pro vstup a výstup #

mnoho aplikací pro Android používá při přechodu mezi aktivitami v systému Android Vlastní Animace pro vstup a výstup. Chrome vlastní karty se neliší, můžete změnit vstup a výstup (když uživatel stiskne zpět) animace, aby byly v souladu se zbytkem vaší aplikace.

Zahřát Chrome, aby se stránky načítají rychleji #

ve výchozím nastavení, když CustomTabsIntent#launchUrl nazývá se to bude točit Chrome a spustit URL. To může zabrat drahocenný čas a ovlivnit vnímání hladkosti.

Jsme přesvědčeni, že uživatelé poptávka téměř okamžité zkušenosti, takže jsme poskytli Služby v Chrome, že vaše aplikace může připojit a říct, Chrome, aby se zahřál prohlížeče a nativní komponenty. Jsme také experimentuje s možností pro vás, vývojář sdělit Chrome pravděpodobnou sadu webových stránek, které uživatel navštíví. Chrome pak budou moci provádět:

DNS pre-usnesení z hlavní domény
DNS pre-usnesení největší pravděpodobností sub-zdroje
Pre-připojení na místo určení včetně HTTPS/TLS vyjednávání.

postup zahřívání Chromu je následující:

pro připojení ke službě použijte CustomTabsClient#bindCustomTabsService.
jakmile je služba připojena, zavolejte na CustomTabsClient#warmup a spusťte Chrome v zákulisí.
voláním CustomTabsClient#newSession vytvořte novou relaci. Tato relace se používá pro všechny požadavky na API.
volitelně při vytváření nové relace připojte jako parametr CustomTabsCallback, abyste věděli, že byla stránka načtena.
řekněte prohlížeči Chrome, které stránky Uživatel pravděpodobně načte pomocí CustomTabsSession#mayLaunchUrl.
vyvolejte Konstruktor CustomTabsIntent.Builder předáním vytvořeného CustomTabsSession jako parametru.

Připojte se ke službě Chrome #

metoda CustomTabsClient#bindCustomTabsService odstraňuje složitost připojení ke službě vlastní karty.

Vytvořte třídu, která rozšiřuje CustomTabsServiceConnection a pomocí onCustomTabsServiceConnected získáte instanci CustomTabsClient. Tato instance bude zapotřebí v dalších krocích.

zahřejte proces prohlížeče #

boolean warmup(long flags)

ohřívá proces prohlížeče a načte nativní knihovny. Warmup je asynchronní, návratová hodnota označuje, zda byl požadavek přijat. Více úspěšných hovorů se také vrátí true.

vrací true pro úspěch.

vytvoření nové relace karty#

boolean newSession(CustomTabsCallback callback)

Session se používá v následujících hovorech k propojení mayLaunchUrl volání, CustomTabsIntent a karta generované k sobě navzájem. Zde uvedené zpětné volání je spojeno s vytvořenou relací. Veškeré aktualizace vytvořené relace (viz vlastní karty Callback níže) jsou také přijímány prostřednictvím tohoto callback. Vrátí, zda byla relace úspěšně vytvořena. Více hovorů se stejnou CustomTabsCallback nebo null hodnota vrátí false.

řekněte Chromu, jakou adresu URL uživatel pravděpodobně otevře #

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

tato metoda CustomTabsSession řekne prohlížeči pravděpodobnou budoucí navigaci na adresu URL. Metoda warmup() by měla být nejprve označena jako osvědčená praxe. Nejpravděpodobnější adresa URL musí být zadána jako první. Volitelně lze poskytnout seznam dalších pravděpodobných adres URL. Jsou považovány za méně pravděpodobné než první, a musí být seřazeny v sestupném pořadí priorit. Tyto další adresy URL mohou být ignorovány. Všechna předchozí volání k této metodě budou deprioritizována. Vrátí, zda byla operace úspěšně dokončena.

vlastní záložky připojení Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

bude volán, když navigační událost se stane na kartě Vlastní. „NavigationEvent int“ je jednou z 6 hodnot, která definuje stav stránky. Další informace naleznete níže.

co se stane, pokud uživatel nemá nainstalovanou nejnovější verzi prohlížeče Chrome? #

vlastní karty používá ACTION_VIEW záměr s klíčovými doplňky přizpůsobit uživatelské rozhraní. To znamená, že ve výchozím nastavení bude stránkaotevřené v systémovém prohlížeči nebo ve výchozím prohlížeči uživatele.

pokud má uživatel nainstalovaný Chrome a je to výchozí prohlížeč, automaticky vyzvedne doplňky a představí přizpůsobené uživatelské rozhraní. Je také možné, aby jiný prohlížeč použil Intent extras k poskytnutí podobného přizpůsobeného rozhraní.

Jak mohu zkontrolovat, zda Chrome podporuje vlastní karty Chrome? #

všechny verze prohlížeče Chrome podporující vlastní karty Chrome vystavují službu. Chcete-li zkontrolovat, zda Chrome podporuje vlastní karty, zkuste se ke službě připojit. Pokud uspěje, lze bezpečně použít vlastní karty.

osvědčené postupy #

od spuštění vlastních karet Chrome jsme viděli různé implementace s různou úrovní kvality. Tato část popisuje soubor osvědčených postupů, které jsme našli pro vytvoření dobré integrace.

Připojte se ke službě vlastní karty a zavolejte warmup() #

při otevření odkazu s vlastními kartami můžete ušetřit až 700 ms připojením ke Službě a předběžným načtením prohlížeče Chrome.

Připojte se ke službě vlastní karty metodou onStart() činností, ze kterých chcete spustit vlastní kartu. Po připojení volejte warmup().

načítání se děje jako proces s nízkou prioritou, což znamená, že nebude mít žádný negativní dopad na vaši aplikaci, ale při načítání odkazu výrazně zvýší výkon.

Pre-render obsah #

Pre-rendering bude externí obsah otevřít okamžitě. Takže, jako by váš uživatel měl alespoň 50% pravděpodobnost kliknutí na odkaz, zavolejte metodu mayLaunchUrl ().

volání mayLaunchUrl() provede vlastní karty před načtením hlavní stránky s podpůrným obsahem a předběžným vykreslením. Tím získáte maximální rychlost procesu načítání stránky, ale přichází s náklady na síť a baterii.

Vlastní Karty je chytrý a ví, že když uživatel používá telefon na měřeného sítě, nebo jestli je to low-end zařízení, a pre-rendering bude mít negativní vliv na celkový výkon zařízení a nebude pre-fetch nebo pre-render na tyto scénáře. Není tedy třeba optimalizovat vaši aplikaci pro tyto případy.

Poskytnout fallback při Vlastní Karty není nainstalován #

i když Vlastní Karty je k dispozici pro velkou většinu uživatelů, tam jsou některé scénáře, kde prohlížeč, který podporuje Vlastní Karty není nainstalován na zařízení nebo zařízení nepodporuje verzi prohlížeče, který má Vlastní Karty povoleno.

ujistěte se, že poskytují záložní zdroj, který poskytuje dobré uživatelské zkušenosti buď otevřením výchozí prohlížeč nebo pomocí vlastní implementace WebView.

Přidejte svou aplikaci jako referrer #

obvykle je velmi důležité, aby webové stránky sledovaly, odkud jejich provoz pochází. Ujistěte se, dejte jim vědět, že jste odeslání je uživateli nastavením referrer při spuštění své Vlastní Tab

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

Přidat vlastní animace #

Vlastní animace bude přechod z aplikace do obsah webu hladší. Ujistěte se, že dokončovací animace je opakem počáteční animace, protože to pomůže uživateli pochopit, že se vrací k obsahu, kde začala navigace.

výběrem ikony pro Tlačítko Akce #

přidáním tlačítka akce se uživatelé více zapojí do funkcí aplikace. Pokud však neexistuje dobrá ikona, která by představovala akci, kterou bude tlačítko akce provádět, vytvořte bitmapu s textem popisujícím akci.

nezapomeňte, že maximální velikost bitmapy je 24dp výška x 48dp šířka.

příprava na jiné prohlížeče #

nezapomeňte, že uživatel může mít nainstalovaný více než jeden prohlížeč, který podporuje vlastní karty. Pokud existuje více než jeden prohlížeč, který podporuje Vlastní Karty a nic, pokud jim je preferovaný prohlížeč, zeptejte se uživatele, jak chce otevřít odkaz

Umožní uživateli zvolit z Vlastní Karty #

Přidat možnost do aplikace pro uživatele k otevření odkazy v výchozí prohlížeč namísto použití Vlastní Tab. To je zvláště důležité, pokud aplikace otevřela odkaz pomocí prohlížeče před přidáním podpory pro vlastní karty.

nechte nativní aplikace zpracovat obsah #

některé adresy URL mohou být zpracovány nativními aplikacemi. Pokud má uživatel nainstalovanou aplikaci Twitter a klikne na odkaz na tweet. Očekává, že to aplikace Twitter zvládne.

před otevřením adresy url z aplikace zkontrolujte, zda je k dispozici nativní alternativa, a použijte ji.

Přizpůsobte barvu panelu nástrojů #

Přizpůsobte si primární barvu aplikace, pokud chcete, aby uživatel cítil, že obsah je součástí vaší aplikace.

Chcete-li uživateli objasnit, že opustila vaši aplikaci, barvu vůbec neupravujte.

Přidat Sdílení Akce #

ujistěte Se, že jste přidat Podíl Opatření k přetečení menu, protože uživatelé očekávají, že budou moci sdílet odkaz na obsah, které jsou vidět ve většině případů použití, a Vlastní Karty nemusí přidat jeden ve výchozím nastavení.

Přizpůsobte tlačítko Zavřít #

Přizpůsobte tlačítko zavřít, aby se karta Custom cítila, že je součástí vaší aplikace.

pokud chcete, aby uživatel cítil, že vlastní karty jsou modální dialog, použijte výchozí tlačítko“ X“. Pokud chcete, aby uživatel cítil, že vlastní karta je součástí toku aplikace, použijte šipku zpět.

Rukojeť interní odkazy #

Když zachytí kliknutí na odkazy generované android:autoLink nebo převažující kliknutí na odkazy na WebViews, ujistěte se, že vaše aplikace zpracovává vnitřní odkazy a nechat je Vlastní Karty zvládnout vnější.

Zpracovat více kliknutí #

Pokud potřebujete udělat nějaké zpracování mezi uživatele, kliknutí na odkaz a otevření Vlastní Kartu, ujistěte se, že to běží pod 100ms. Jinak lidé budou vidět necitlivosti a může se pokusit klikněte několikrát na odkaz.

pokud není možné vyhnout se zpoždění, ujistěte se, že aplikace je připravena, když uživatel klikne vícekrát na stejný odkaz a neotevře vlastní kartu vícekrát.

nízká úroveň API #

ačkoli doporučená metoda integrace aplikace s vlastními kartami používá knihovnu podpory vlastních karet, je k dispozici také implementace nízké úrovně.

kompletní implementace knihovny podpory je k dispozici na Githubu a může být použita jako výchozí bod. Obsahuje také soubory AIDL potřebné pro připojení ke službě, protože ty obsažené v úložišti Chromium nejsou přímo použitelné s Android Studio.

základy pro Spouštění vlastních karet pomocí nízkoúrovňového API #

přidání uživatelských úprav #

přizpůsobení uživatelského rozhraní je zahrnuto přidáním doplňků k záměru ACTION_VIEW. Úplný seznam extras klíčů používaných k přizpůsobení uživatelského rozhraní naleznete v dokumentech CustomTabsIntent. Následuje příklad, jak přidat vlastní barvu panelu nástrojů:

připojení ke službě Custom Tabs #

službu Custom Tabs lze použít stejným způsobem jako ostatní služby Android. Rozhraní je vytvořeno pomocí AIDL a automaticky pro vás vytvoří třídu služeb proxy.

Použít metody na proxy služby warm-up, vytvořit zasedání a pre-fetch

Užitečné Odkazy #

Github Demo
Chrome Vlastní Karty na StackOverflow

FAQ #

Kdy to bude k dispozici na stabilní kanál?
- vlastní karty Chrome jsou k dispozici od prohlížeče Chrome 45.
Kde mohu klást otázky?
- značka Stackoverflow: chrome-custom-tabs