Chrome Custom Tabs

BY admin

| januari 27, 2022

Vad är Chrome Custom Tabs? #

apputvecklare står inför ett val när en användare trycker på en URL för att antingen starta en webbläsare eller bygga sin egen webbläsare i appen med hjälp av WebViews.

båda alternativen presenterar utmaningar-att starta webbläsaren är en tung kontextbrytare som inte kan anpassas, medan Webbvisningar inte delar tillstånd med webbläsaren och lägger till underhållskostnader.

Chrome – anpassade flikar ger appar Mer kontroll över sin webbupplevelse och gör övergångar mellan inbyggt och webbinnehåll mer sömlösa utan att behöva tillgripa en webbvy.

Chrome anpassade flikar tillåter en app att anpassa hur Chrome ser ut och känns. En app kan ändra saker som:

verktygsfältets färg
ange och avsluta animeringar
Lägg till anpassade åtgärder i Chrome-verktygsfältet, overflow-menyn och nedre verktygsfältet

Chrome-anpassade flikar tillåter också utvecklaren att starta Chrome och hämta innehåll för snabbare laddning.

du kan testa detta nu med vårt prov på Github.

När ska jag använda Chrome anpassade flikar vs WebView? #

WebView är en bra lösning om du är värd för ditt eget innehåll i din app. Om din app leder personer till webbadresser utanför din domän rekommenderar vi att du använder anpassade flikar i Chrome av dessa skäl:

enkel att implementera. Inget behov av att bygga kod för att hantera förfrågningar, tillståndsbidrag eller cookiebutiker.
UI anpassning:
- verktygsfältets färg
- åtgärdsknapp
- Anpassade menyalternativ
- anpassade in / ut animationer
- nedre verktygsfältet
Navigationsmedvetenhet: webbläsaren ger en återuppringning till applikationen vid en extern navigering.
säkerhet: webbläsaren använder Googles säkra surfning för att skydda användaren och enheten från farliga webbplatser.
prestandaoptimering:
- förvärmning av webbläsaren i bakgrunden, samtidigt som man undviker att stjäla resurser från applikationen.
- tillhandahåller en sannolik URL i förväg till webbläsaren, som kan utföra spekulativt arbete, vilket påskyndar sidladdningstiden.
livscykelhantering: webbläsaren förhindrar att applikationen kastas ut av systemet medan den är ovanpå den genom att höja dess betydelse för ”Förgrunds” – nivån.
delad cookie-burk och behörighetsmodell så att användare inte behöver logga in på webbplatser de redan är anslutna till eller bevilja behörigheter som de redan har beviljat.
om användaren har aktiverat Data Saver kommer de fortfarande att dra nytta av det.
synkroniserad Komplettera automatiskt över enheter för bättre formulärkomplettering.
enkel anpassning modell.
snabbt återgå till app med ett enda tryck.
du vill använda de senaste webbläsarimplementeringarna på enheter före Lollipop (automatisk uppdatering av WebView) istället för äldre Webbvisningar.

när kommer detta att finnas tillgängligt? #

från och med Chrome 45 är Chrome Custom Tabs nu allmänt tillgängligt för alla användare av Chrome, på alla Chrome-stödda Android-versioner (Jellybean och framåt).

vi letar efter feedback, frågor och förslag på detta projekt, så vi uppmuntrar dig att lämna in problem på crbug.com och ställa frågor till vårt Twitter-konto @ChromiumDev.

Implementeringsguide #

ett komplett exempel finns på https://github.com/GoogleChrome/custom-tabs-client. Den innehåller återanvändbara klasser för att anpassa användargränssnittet, ansluta till bakgrundstjänsten och hantera livscykeln för både applikationen och den anpassade flikaktiviteten.

om du följer vägledningen från den här sidan kommer du att kunna skapa en bra integration.

det första steget för en anpassad Flikintegration är att lägga till anpassade Flikstödsbibliotek i ditt projekt. Öppna filen build.gradle och Lägg till supportbiblioteket i avsnittet beroende.

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

när Supportbiblioteket har lagts till i ditt projekt finns det två uppsättningar möjliga anpassningar:

anpassa användargränssnittet och interaktionen med de anpassade flikarna.
gör sidan laddas snabbare, och hålla programmet vid liv.

UI-anpassningarna görs med hjälp av klasserna CustomTabsIntent och CustomTabsIntent.Builder; prestandaförbättringarna uppnås genom att använda CustomTabsClient för att ansluta till tjänsten Custom Tabs, värma upp Chrome och meddela vilka webbadresser som öppnas.

öppna en Chrome anpassad flik #

konfigurera färgen på adressfältet #

en av de viktigaste (och enklaste att implementera) aspekterna av Chrome anpassade flikar är möjligheten för dig att ändra färgen på adressfältet för att överensstämma med appens tema.

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

konfigurera en anpassad åtgärdsknapp #

som utvecklare av din app har du full kontroll över åtgärdsknappen som presenteras för dina användare på Chrome-fliken.

i de flesta fall kommer detta att vara en primär åtgärd som Dela eller en annan vanlig aktivitet som dina användare kommer att utföra.

åtgärdsknappen representeras som en bunt med en ikon för åtgärdsknappen och en pendingIntent som kommer att anropas av Chrome när din användare träffar åtgärdsknappen. Ikonen är currenty 24dp i höjd och 24-48 dp i bredd.

konfigurera en anpassad meny #

Chrome-webbläsaren har en omfattande meny med åtgärder som användare kommer att utföra ofta i en webbläsare, men de kanske inte är relevanta för ditt programkontext.

som utvecklare kan du lägga till och anpassa upp till fem menyalternativ som kommer att visas mellan ikonraden och fotobjekten.

menyalternativet läggs till genom att ringa CustomTabsIntent.Builder#addMenuItem med titel och en pendingIntent som Chrome kommer att ringa för dina räkning när användaren trycker på objektet skickas som parametrar.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

konfigurera anpassade ange och avsluta animationer #

många Android-applikationer använder anpassade visa ingångs-och Utgångsanimationer vid övergång mellan aktiviteter på Android. Chrome anpassade flikar är inte annorlunda, Du kan ändra ingång och utgång (när användaren trycker tillbaka) animationer för att hålla dem förenliga med resten av din ansökan.

värm upp Chrome så att sidor laddas snabbare #

som standard, när CustomTabsIntent#launchUrl heter, kommer det att snurra upp Chrome och starta webbadressen. Detta kan ta dyrbar tid och påverka uppfattningen om jämnhet.

vi tror att användare kräver en nästan omedelbar upplevelse, så vi har tillhandahållit en tjänst i Chrome som din app kan ansluta till och ber Chrome att värma upp webbläsaren och de inbyggda komponenterna. Vi experimenterar också med möjligheten för dig, utvecklaren att berätta för Chrome den troliga uppsättningen webbsidor som användaren kommer att besöka. Chrome kommer då att kunna utföra:

DNS Pre-upplösning av huvuddomänen
DNS pre-upplösning av de mest sannolika delresurser
Pre-anslutning till destinationen inklusive HTTPS/TLS förhandling.

processen för uppvärmning av Chrome är som följer:

använd CustomTabsClient#bindCustomTabsService för att ansluta till tjänsten.
när tjänsten är ansluten, Ring CustomTabsClient#warmup för att starta Chrome bakom kulisserna.
Ring CustomTabsClient#newSession för att skapa en ny session. Denna session används för alla förfrågningar till API.
bifoga eventuellt en CustomTabsCallback som en parameter när du skapar en ny session, så att du vet att en sida laddades.
berätta för Chrome vilka sidor Användaren sannolikt kommer att ladda med CustomTabsSession#mayLaunchUrl.
Ring CustomTabsIntent.Builder konstruktören som passerar den skapade CustomTabsSession som en parameter.

Anslut till Chrome-tjänsten #

metoden CustomTabsClient#bindCustomTabsService tar bort komplexiteten att ansluta till tjänsten anpassade flikar.

skapa en klass som utökar CustomTabsServiceConnection och använd onCustomTabsServiceConnected för att få en instans av CustomTabsClient. Denna instans kommer att behövas i nästa steg.

värm upp Webbläsarprocessen #

boolean warmup(long flags)

värmer upp webbläsarprocessen och laddar de inbyggda biblioteken. Warmup är asynkron, returvärdet anger om begäran har accepterats. Flera framgångsrika samtal kommer också att returnera true.

returnerar true för framgång.

skapa en ny fliksession#

boolean newSession(CustomTabsCallback callback)

Session används i efterföljande samtal för att länka mayLaunchUrl-samtal, CustomTabsIntent och fliken genererad till varandra. Återuppringningen som tillhandahålls här är associerad med den skapade sessionen. Eventuella uppdateringar för den skapade sessionen (se anpassade flikar återuppringning nedan) tas också emot genom denna återuppringning. Returnerar om en session har skapats. Flera samtal med samma CustomTabsCallback eller ett null-värde kommer att returnera false.

berätta för Chrome vilken URL som användaren sannolikt kommer att öppna #

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

denna CustomTabsSession-metod berättar webbläsaren för en sannolik framtida navigering till en URL. Metoden warmup() bör kallas först som en bästa praxis. Den mest sannolika webbadressen måste anges först. Eventuellt kan en lista med andra troliga webbadresser tillhandahållas. De behandlas som mindre troliga än den första och måste sorteras i minskande prioritetsordning. Dessa ytterligare webbadresser kan ignoreras. Alla tidigare samtal till den här metoden kommer att berövas. Returnerar om åtgärden har slutförts.

anpassade flikar anslutning återuppringning #

void onNavigationEvent(int navigationEvent, Bundle extras)

kommer att anropas när en navigationshändelse händer på fliken Anpassad. ’NavigationEvent int’ är ett av 6 värden som definierar tillståndet för sidan är i. Se nedan för mer information.

vad händer om användaren inte har en ny version av Chrome installerad? #

anpassade flikar använder en ACTION_VIEW-avsikt med viktiga extrafunktioner för att anpassa användargränssnittet. Det betyder att sidan som standard kommer attöppnas i systemwebbläsaren eller användarens standardwebbläsare.

om användaren har Chrome installerat och det är standardwebbläsaren kommer den automatiskt att hämta extrafunktionerna och presentera ett anpassat användargränssnitt. Det är också möjligt för en annan webbläsare att använda Intent extras för att tillhandahålla ett liknande anpassat gränssnitt.

Hur kan jag kontrollera om Chrome stöder Chrome-anpassade flikar? #

alla versioner av Chrome som stöder Chrome – anpassade flikar exponerar en tjänst. För att kontrollera om Chrome stöder anpassade flikar, försök att binda till tjänsten. Om det lyckas kan anpassade flikar säkert användas.

bästa praxis #

sedan Chrome Custom Tabs lanserades har vi sett olika implementeringar med olika kvalitetsnivåer. Det här avsnittet beskriver en uppsättning bästa metoder som vi har hittat för att skapa en bra integration.

Anslut till tjänsten anpassade flikar och ring warmup() #

du kan spara upp till 700 ms när du öppnar en länk med de anpassade flikarna genom att ansluta till tjänsten och förinstallera Chrome.

Anslut till tjänsten anpassade flikar på onstart () – metoden för de aktiviteter du planerar att starta en anpassad flik från. Vid anslutning, Ring warmup ().

laddningen sker som en lågprioriterad process, vilket innebär att den inte kommer att ha någon negativ prestandapåverkan på din applikation, men kommer att ge en stor prestationsökning när du laddar en länk.

Pre-render content #

Pre-rendering gör externt innehåll Öppet direkt. Så, som om din användare har minst 50% sannolikhet att klicka på länken, Ring mayLaunchUrl () – metoden.

Calling mayLaunchUrl () kommer att göra anpassade flikar Pre-hämta huvudsidan med stödjande innehåll och pre-render. Detta ger maximal hastighet upp till sidladdningsprocessen, men kommer med en nätverks-och batterikostnad.

anpassade flikar är smart och vet om användaren använder telefonen på ett uppmätt nätverk eller om det är en låg slut enhet och pre-rendering kommer att ha en negativ effekt på den totala prestandan hos enheten och kommer inte pre-hämta eller pre-render på dessa scenarier. Så det finns inget behov av att optimera din ansökan för dessa fall.

ge en reserv för när anpassade flikar inte är installerade #

även om anpassade flikar är tillgängliga för de allra flesta användare finns det vissa scenarier där en webbläsare som stöder anpassade flikar inte är installerad på enheten eller enheten inte stöder en webbläsarversion som har anpassade flikar aktiverade.

se till att ge en reserv som ger en bra användarupplevelse genom att antingen öppna standardwebbläsaren eller använda din egen WebView-implementering.

Lägg till din app som referent #

det är vanligtvis mycket viktigt för webbplatser att spåra var deras trafik kommer ifrån. Se till att du låter dem veta att du skickar dem användare genom att ställa in referenten när du startar din anpassade flik

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

Lägg till anpassade animationer #

anpassade animationer gör övergången från din applikation till webbinnehållet smidigare. Se till att finishanimationen är baksidan av startanimationen, eftersom det hjälper användaren att förstå att hon återvänder till innehållet där navigeringen startade.

att välja en ikon för åtgärdsknappen #

att lägga till en åtgärdsknapp gör att användarna engagerar sig mer med dina appfunktioner. Men om det inte finns en bra ikon för att representera den åtgärd som din åtgärdsknapp ska utföra, skapa en bitmapp med en text som beskriver åtgärden.

kom ihåg att den maximala storleken för bitmappen är 24dp höjd x 48dp bredd.

förberedelser för andra webbläsare #

kom ihåg att användaren kan ha mer än en webbläsare installerad som stöder anpassade flikar. Om det finns mer än en webbläsare som stöder anpassade flikar och ingen om de är den föredragna webbläsaren, fråga användaren hur hon vill öppna länken

Tillåt användaren att välja bort anpassade flikar #

Lägg till ett alternativ i applikationen för användaren att öppna länkar i standardwebbläsaren istället för att använda en anpassad flik. Detta är särskilt viktigt om programmet öppnade länken med webbläsaren innan du lägger till stöd för anpassade flikar.

låt inbyggda program hantera innehållet #

vissa webbadresser kan hanteras av inbyggda program. Om användaren har Twitter-appen installerad och klickar på en länk till en tweet. Hon förväntar sig att Twitter-applikationen kommer att hantera det.

innan du öppnar en url från din ansökan, kontrollera om ett inbyggt alternativ är tillgängligt och använd det.

anpassa verktygsfältets färg #

anpassa med programmets primära färg om du vill att användaren ska känna att innehållet är en del av din applikation.

om du vill göra det klart för användaren att hon har lämnat din ansökan, Anpassa inte färgen alls.

Lägg till en Delningsåtgärd #

se till att du lägger till Delningsåtgärden i överflödesmenyn, eftersom användarna förväntar sig att kunna dela länken till innehållet de ser i de flesta användningsfall, och anpassade flikar lägger inte till en som standard.

anpassa stängningsknappen #

anpassa stängningsknappen så att den anpassade fliken känner att den är en del av din applikation.

om du vill att användaren ska känna att anpassade flikar är en modal dialogruta, använd standard” X ” – knappen. Om du vill att användaren ska känna att fliken Anpassad är en del av applikationsflödet, använd bakåtpilen.

hantera interna länkar #

när avlyssna klick på länkar som genereras av android:autoLink eller övergripande klick på länkar på WebViews, se till att din ansökan hanterar Interna Länkar och låt oss anpassade flikar Hantera externa.

hantera flera klick #

om du behöver göra någon bearbetning mellan användaren som klickar på en länk och öppnar fliken Anpassad, se till att den körs under 100 ms. annars kommer folk att se svaret och kan försöka klicka flera gånger på länken.

om det inte är möjligt att undvika förseningen, se till att programmet är förberett för när en användare klickar flera gånger på samma länk och inte öppnar en anpassad flik flera gånger.

låg nivå API #

även om den rekommenderade metoden för att integrera din ansökan med anpassade flikar använder anpassade flikar stöd bibliotek, en låg nivå genomförandet finns också.

den fullständiga implementeringen av Supportbiblioteket är tillgänglig på Github och en användas som startpunkt. Den innehåller också de AIDL-filer som krävs för att ansluta till tjänsten, eftersom de som finns i Chromium-förvaret inte kan användas direkt med Android Studio.

grunderna för att starta anpassade flikar med hjälp av låg nivå API #

lägga UI anpassningar #

UI anpassningar ingår genom att lägga till extrafunktioner till ACTION_VIEW uppsåt. En fullständig lista över extra nycklar som används för att anpassa användargränssnittet kan hittas på CustomTabsIntent docs. Ett exempel på hur du lägger till en anpassad verktygsfältfärg följer:

anslutning till tjänsten anpassade flikar #

tjänsten anpassade flikar kan användas på samma sätt som andra Android-tjänster är. Gränssnittet skapas med AIDL och skapar automatiskt en proxytjänstklass för dig.

använd metoderna på proxytjänsten för att värma upp, skapa sessioner och hämta

användbara länkar #

Github Demo
Chrome anpassade flikar på StackOverflow

FAQ #

när kommer detta att finnas tillgängligt på stabil kanal?
- Chrome anpassade flikar är tillgängliga från och med Chrome 45.
Var Kan jag ställa frågor?
- Stackoverflow-tagg: chrome-anpassade flikar