Chrome aangepaste tabbladen

BY admin

| januari 27, 2022

Wat zijn Chrome aangepaste tabbladen? #

App-ontwikkelaars staan voor een keuze wanneer een gebruiker een URL tikt om een browser te starten, of hun eigen in-app-browser te bouwen met behulp van WebViews.

beide opties bieden uitdagingen—het opstarten van de browser is een zware contextschakelaar die niet aanpasbaar is, terwijl WebViews de status niet delen met de browser en onderhoud overhead toevoegen.

Chrome Custom Tabs geven apps meer controle over hun webervaring, en maken de overgangen tussen native en webinhoud naadloos zonder gebruik te hoeven maken van een WebView.

Chrome aangepaste tabbladen laten een app toe om aan te passen hoe Chrome eruit ziet en aanvoelt. Een app kan dingen veranderen zoals:

Werkbalkkleur
animaties invoeren en afsluiten
aangepaste acties toevoegen aan de Chrome-werkbalk, het overloopmenu en de onderste werkbalk

aangepaste tabbladen van Chrome stellen de ontwikkelaar ook in staat om Chrome vooraf te starten en inhoud vooraf op te halen voor sneller laden.

u kunt dit nu testen met ons monster op Github.

Wanneer moet Ik Chrome Custom Tabs vs WebView gebruiken? #

de WebView is een goede oplossing als u uw eigen content in uw app host. Als uw app mensen doorverwijst naar url ‘ s buiten uw domein, raden we u aan om Chrome aangepaste tabbladen te gebruiken om deze redenen:

eenvoudig te implementeren. Het is niet nodig om code te bouwen om aanvragen, toestemmingen of cookiewinkels te beheren.
UI-aanpassing:
- Werkbalkkleur
- actieknop
- aangepaste menu-items
- Aangepaste in / uit animaties
- onderste werkbalk
navigatie bewustzijn: de browser levert een callback naar de applicatie op een externe navigatie.
beveiliging: de browser gebruikt Google ‘ s Safe Browsing om de gebruiker en het apparaat te beschermen tegen gevaarlijke sites.
optimalisatie van prestaties:
- Pre-opwarming van de Browser op de achtergrond, terwijl het vermijden van het stelen van middelen uit de applicatie.
- geeft van tevoren een waarschijnlijke URL aan de browser, die speculatief werk kan uitvoeren, waardoor de laadtijd van de pagina wordt versneld.
Lifecycle management: de browser voorkomt dat de toepassing wordt uitgezet door het systeem terwijl op de top van het, door het verhogen van het belang van de “voorgrond” niveau.
gedeeld cookie jar en machtigingen model zodat gebruikers niet hoeven in te loggen op sites waar ze al mee verbonden zijn, of opnieuw machtigingen die ze al hebben verleend.
als de gebruiker heeft ingeschakeld Data Saver, zullen ze nog steeds profiteren van het.
gesynchroniseerde AutoComplete tussen apparaten voor een betere aanvulling van formulieren.
eenvoudig aanpassingsmodel.
keer snel terug naar de app met één tik.
u wilt gebruik maken van de nieuwste browser implementaties op apparaten pre-Lollipop (auto updating WebView) in plaats van oudere WebViews.

wanneer is dit beschikbaar? #

vanaf Chrome 45 is Chrome Custom Tabs nu algemeen beschikbaar voor alle gebruikers van Chrome, op alle ondersteunde Android-versies van Chrome (Jellybean verder).

we zijn op zoek naar feedback, vragen en suggesties over dit project. crbug.com en vragen stellen aan onze Twitter-account @ChromiumDev.

Implementation guide #

een compleet voorbeeld is beschikbaar op https://github.com/GoogleChrome/custom-tabs-client. Het bevat herbruikbare klassen om de gebruikersinterface aan te passen, verbinding te maken met de achtergrondservice en de levenscyclus van zowel de toepassing als de aangepaste tabactiviteit af te handelen.

als u de richtlijnen van deze pagina volgt, zult u in staat zijn om een geweldige integratie te creëren.

de eerste stap voor een aangepaste tabs-integratie is het toevoegen van de aangepaste Tabs-Ondersteuningsbibliotheek aan uw project. Open uw build.gradle bestand en voeg de ondersteuningsbibliotheek toe aan het gedeelte afhankelijkheid.

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

zodra de Ondersteuningsbibliotheek aan uw project is toegevoegd, zijn er twee sets van mogelijke aanpassingen:

de gebruikersinterface aanpassen en interactie met de aangepaste tabbladen.
de pagina sneller laden en de toepassing levend houden.

de UI-aanpassingen worden gedaan door gebruik te maken van de klassen CustomTabsIntent en CustomTabsIntent.Builder; de prestatieverbeteringen worden bereikt door gebruik te maken van de CustomTabsClient om verbinding te maken met de Custom Tabs-service, warm-up Chrome en het te laten weten welke URL ‘ s zullen worden geopend.

het openen van een Chrome-tabblad #

de kleur van de adresbalk #

een van de belangrijkste (en eenvoudigste te implementeren) aspecten van Chrome-tabbladen is de mogelijkheid voor u om de kleur van de adresbalk te wijzigen om consistent te zijn met het thema van uw app.

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

een knop aangepaste actie instellen #

als de ontwikkelaar van uw app, heb je volledige controle over de knop actie die wordt gepresenteerd aan uw gebruikers in het tabblad Chrome.

in de meeste gevallen zal dit een primaire actie zijn, zoals Share, of een andere veelvoorkomende activiteit die uw gebruikers zullen uitvoeren.

de knop actie wordt weergegeven als een bundel met een pictogram van de knop actie en een pendingIntent die door Chrome wordt aangeroepen wanneer uw gebruiker op de knop Actie drukt. Het pictogram is currenlty 24dp in hoogte en 24-48 dp in breedte.

een aangepast menu Instellen#

de Chrome-browser heeft een uitgebreid menu met acties die gebruikers vaak in een browser uitvoeren, maar ze zijn mogelijk niet relevant voor uw toepassingscontext.

als ontwikkelaar kunt u maximaal vijf menu-items toevoegen en aanpassen die verschijnen tussen de pictogramrij en voetitems.

het menu-item wordt toegevoegd door CustomTabsIntent.Builder#addMenuItem aan te roepen met titel en een pendingIntent die Chrome namens u zal aanroepen wanneer de gebruiker op het item tikt, worden doorgegeven als parameters.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

aangepaste enter-en exit-animaties configureren #

veel Android-toepassingen gebruiken aangepaste entree-en Exit-animaties bij de overgang tussen activiteiten op Android. Chrome Custom Tabs is niet anders, u kunt de ingang en uitgang (wanneer de gebruiker drukt terug) animaties te wijzigen om ze consistent te houden met de rest van uw applicatie.

Chrome opwarmen om pagina ‘ s sneller te laten laden #

standaard zal het Chrome draaien en de URL starten wanneer CustomTabsIntent#launchUrl wordt aangeroepen. Dit kan kostbare tijd in beslag nemen en invloed hebben op de perceptie van gladheid.

wij zijn van mening dat gebruikers een bijna onmiddellijke ervaring nodig hebben, dus hebben we een Service in Chrome geleverd waarmee uw app verbinding kan maken en Chrome kan vertellen de browser en de native componenten op te warmen. We zijn ook experimenteren met de mogelijkheid voor u, de ontwikkelaar om Chrome vertellen de waarschijnlijke set van webpagina ‘ s die de gebruiker zal bezoeken. Chrome zal dan in staat zijn om uit te voeren:

DNS-pre-resolutie van het hoofddomein
DNS-pre-resolutie van de meest waarschijnlijke subbronnen
Pre-verbinding met de bestemming, inclusief https/TLS-onderhandeling.

het opwarmen van chroom verloopt als volgt:

gebruik CustomTabsClient#bindCustomTabsService om verbinding te maken met de service.
zodra de service is verbonden, bel CustomTabsClient#warmup om Chrome achter de schermen te starten.
aanroep CustomTabsClient#newSession om een nieuwe sessie aan te maken. Deze sessie wordt gebruikt voor alle aanvragen voor de API.
voeg optioneel een CustomTabsCallback als parameter toe bij het aanmaken van een nieuwe sessie, zodat u weet dat een pagina geladen is.
vertel Chrome welke pagina ‘ s de gebruiker waarschijnlijk zal laden met CustomTabsSession#mayLaunchUrl.
noem de CustomTabsIntent.Builder constructor die de aangemaakte CustomTabsSession passeert als parameter.

verbinding maken met de Chrome-Service #

de methode CustomTabsClient#bindCustomTabsService neemt de complexiteit weg van het verbinden met de Custom Tabs-service.

Maak een klasse aan die CustomTabsServiceConnection uitbreidt en gebruik onCustomTabsServiceConnected om een instantie van CustomTabsClientte krijgen. Deze instantie zal nodig zijn bij de volgende stappen.

het Browserproces opwarmen #

boolean warmup(long flags)

verwarmt het browserproces en laadt de inheemse bibliotheken. Warmup is asynchroon, de retourwaarde geeft aan of het verzoek is geaccepteerd. Meerdere succesvolle gesprekken zal ook terugkeren true.

geeft true voor succes terug.

Maak een nieuwe tabsessie aan#

boolean newSession(CustomTabsCallback callback)

Session wordt gebruikt in volgende oproepen om mayLaunchUrl gesprek, de CustomTabsIntent en het tabblad gegenereerd aan elkaar te koppelen. De hier verstrekte callback wordt geassocieerd met de gemaakte sessie. Alle updates voor de gemaakte sessie (zie aangepaste tabbladen Callback hieronder) worden ook ontvangen via deze callback. Geeft terug of een sessie succesvol is aangemaakt. Meerdere oproepen met dezelfde CustomTabsCallback of een null-waarde zullen false retourneren.

vertel Chrome welke URL ‘ s de gebruiker waarschijnlijk zal openen #

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

deze CustomTabsSession methode vertelt de browser van een waarschijnlijke toekomstige navigatie naar een URL. De methode warmup() dient als eerste als beste praktijk te worden genoemd. De meest waarschijnlijke URL moet eerst worden opgegeven. Optioneel kan een lijst met andere mogelijke URL ‘ s worden verstrekt. Ze worden als minder waarschijnlijk behandeld dan de eerste en moeten in afnemende volgorde van prioriteit worden gesorteerd. Deze extra URL ‘ s kunnen worden genegeerd. Alle eerdere oproepen naar deze methode zullen worden deprioritized. Geeft terug of de bewerking succesvol is voltooid.

aangepaste Tabs verbinding terugroepen #

void onNavigationEvent(int navigationEvent, Bundle extras)

wordt aangeroepen wanneer een navigatiegebeurtenis plaatsvindt op het tabblad Aangepast. De ‘navigationEvent int’ is een van de 6 waarden die de status van de pagina bepaalt. Zie hieronder voor meer informatie.

Wat gebeurt er als de gebruiker geen recente versie van Chrome heeft geïnstalleerd? #

aangepaste tabbladen gebruiken een ACTION_VIEW-Intentie met sleutelextras om de gebruikersinterface aan te passen. Dit betekent dat standaard de pagina willopen in de systeembrowser, of de standaardbrowser van de gebruiker.

als de gebruiker Chrome heeft geïnstalleerd en het is de standaardbrowser, zal het automatisch de extra ‘ s ophalen en een aangepaste gebruikersinterface presenteren. Het is ook mogelijk voor een andere browser om de intentie extra ‘ s te gebruiken om een soortgelijke aangepaste interface te bieden.

Hoe kan Ik controleren of Chrome aangepaste tabbladen ondersteunt? #

alle versies van Chrome die Chrome aangepaste tabbladen ondersteunen, tonen een service. Als u wilt controleren of Chrome aangepaste tabbladen ondersteunt, probeert u verbinding te maken met de service. Als het lukt, dan kunnen aangepaste tabbladen veilig worden gebruikt.

Best Practices #

sinds Chrome Custom Tabs werd gelanceerd, hebben we verschillende implementaties gezien met verschillende kwaliteitsniveaus. Deze sectie beschrijft een aantal best practices die we hebben gevonden om een goede integratie te creëren.

maak verbinding met de aangepaste Tabs-service en bel warmup() #

u kunt tot 700 ms opslaan bij het openen van een koppeling met de aangepaste Tabs door verbinding te maken met de service en Chrome vooraf te laden.

maak verbinding met de aangepaste Tabs-service op de methode onStart() van de activiteiten waarvan u een aangepast tabblad wilt starten. Bel bij de verbinding warmup ().

het laden gebeurt als een proces met lage prioriteit, wat betekent dat het geen negatieve invloed heeft op de prestaties van uw toepassing, maar een grote prestatieverbetering geeft bij het laden van een link.

Pre-render content #

Pre-rendering zal externe content direct openen. Zo, alsof uw gebruiker heeft ten minste een 50% kans op het klikken op de link, Bel de maylaunchurl() methode.

het aanroepen van mayLaunchUrl () zorgt ervoor dat aangepaste Tabs de hoofdpagina vooraf ophalen met de ondersteunende inhoud en vooraf renderen. Dit geeft de maximale snelheid tot het laden van de pagina proces, maar wordt geleverd met een netwerk en de batterij kosten.

Custom Tabs is slim en weet of de gebruiker de telefoon gebruikt op een gemeten netwerk of als het een low-end apparaat is en pre-rendering zal een negatief effect hebben op de algehele prestaties van het apparaat en zal niet Pre-fetch of pre-render op deze scenario ‘ s. Zo, Er is geen noodzaak om uw toepassing te optimaliseren voor die gevallen.

Geef een fallback voor wanneer aangepaste tabbladen niet zijn geïnstalleerd #

hoewel aangepaste tabbladen beschikbaar zijn voor de grote meerderheid van de gebruikers, zijn er enkele scenario ‘ s waarbij een browser die aangepaste tabbladen ondersteunt niet is geïnstalleerd op het apparaat of het apparaat geen browserversie ondersteunt die aangepaste tabbladen heeft ingeschakeld.

zorg ervoor dat u een fallback biedt die een goede gebruikerservaring biedt door de standaardbrowser te openen of uw eigen WebView-implementatie te gebruiken.

voeg uw app toe als referrer #

het is meestal erg belangrijk voor websites om bij te houden waar hun verkeer vandaan komt. Zorg ervoor dat u hen laat weten dat u hen gebruikers stuurt door de referrer in te stellen bij het opstarten van uw aangepaste Tab

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

aangepaste animaties toevoegen #

aangepaste animaties maken de overgang van uw toepassing naar de webinhoud soepeler. Zorg ervoor dat de afwerkanimatie het omgekeerde is van de startanimatie, omdat het de gebruiker zal helpen begrijpen dat ze terugkeert naar de inhoud waar de navigatie is gestart.

een pictogram kiezen voor de actieknop #

een actieknop toevoegen zorgt ervoor dat gebruikers meer gebruik maken van de functies van uw app. Maar als er geen goed pictogram is om de actie te representeren die uw actieknop zal uitvoeren, maak dan een bitmap met een tekst die de actie beschrijft.

onthoud dat de maximale grootte voor de bitmap 24dp hoogte x 48dp breedte is.

voorbereiden voor andere browsers #

onthoud dat er mogelijk meer dan één browser is geïnstalleerd die aangepaste tabbladen ondersteunt. Als er meer dan één browser is die aangepaste tabbladen ondersteunt en geen browser als deze de voorkeursbrowser is, vraag de gebruiker dan hoe ze de link

wilt openen.laat de gebruiker zich afmelden voor aangepaste tabbladen #

voeg een optie toe aan de toepassing zodat de gebruiker links in de standaardbrowser kan openen in plaats van een aangepast tabblad te gebruiken. Dit is vooral belangrijk als de toepassing de link met behulp van de browser geopend voordat u ondersteuning voor aangepaste tabbladen.

laat native applicaties de inhoud #

afhandelen sommige URL ‘ s kunnen door native applicaties worden afgehandeld. Als de gebruiker de Twitter-app heeft geïnstalleerd en op een link naar een tweet klikt. Ze verwacht dat de Twitter-applicatie het zal behandelen.

voordat u een url opent vanuit uw toepassing, controleert u of er een native alternatief beschikbaar is en gebruikt u het.

pas de kleur van de werkbalk aan #

pas aan met de primaire kleur van uw toepassing als u wilt dat de gebruiker het gevoel heeft dat de inhoud deel uitmaakt van uw toepassing.

als u duidelijk wilt maken voor de gebruiker dat zij uw toepassing heeft verlaten, pas de kleur helemaal niet aan.

voeg een Share-actie toe #

zorg ervoor dat u de Share-actie toevoegt aan het overflow-menu, omdat gebruikers verwachten dat ze de link naar de inhoud die ze zien in de meeste gevallen kunnen delen, en aangepaste tabbladen voegen er standaard geen toe.

pas de sluitknop aan #

Pas de sluitknop aan zodat het tabblad Aangepast aanvoelt dat het deel uitmaakt van uw toepassing.

als u wilt dat de gebruiker het gevoel heeft dat aangepaste tabbladen een modaal dialoogvenster zijn, gebruik dan de standaard” X ” knop. Als u wilt dat de gebruiker voelt dat het tabblad Aangepast deel uitmaakt van de toepassingsstroom, gebruikt u de pijl terug.

Handle interne links #

bij het onderscheppen van klikken op links gegenereerd door android:autoLink of het overschrijven van klikken op links in WebViews, zorg ervoor dat uw applicatie de interne links afhandelt en laten we aangepaste tabbladen de externe links afhandelen.

omgaan met meerdere klikken #

als u een bewerking wilt uitvoeren tussen de gebruiker die op een link klikt en het tabblad Aangepast opent, zorg er dan voor dat deze binnen 100ms loopt. anders zullen mensen de niet-responsiviteit zien en kunnen ze proberen meerdere keren op de link te klikken.

als het niet mogelijk is om de vertraging te voorkomen, moet u ervoor zorgen dat uw toepassing is voorbereid wanneer een gebruiker meerdere keren op dezelfde link klikt en geen aangepast tabblad meerdere keren opent.

Low level API #

hoewel de aanbevolen methode om uw toepassing te integreren met aangepaste tabbladen gebruik maakt van de Custom Tabs Support Library, is er ook een low level implementatie beschikbaar.

de volledige implementatie van de Ondersteuningsbibliotheek is beschikbaar op Github en wordt gebruikt als startpunt. Het bevat ook de AIDL-bestanden die nodig zijn om verbinding te maken met de service, als degenen die in de Chromium repository zijn niet direct bruikbaar met Android Studio.

basis voor het opstarten van aangepaste tabbladen met behulp van de Low Level API #

UI-aanpassingen toevoegen #

UI-aanpassingen worden meegeleverd door Extra ‘ s toe te voegen aan de ACTION_VIEW-Intentie. Een volledige lijst van de extra ‘ s sleutels die worden gebruikt om de gebruikersinterface aan te passen is te vinden op de CustomTabsIntent docs. Een voorbeeld over het toevoegen van een aangepaste werkbalkkleur volgt:

verbinding maken met de aangepaste Tabs-service #

de aangepaste Tabs-service kan op dezelfde manier worden gebruikt als andere Android-Services. De interface wordt gemaakt met AIDL en maakt automatisch een proxy service klasse voor u.

gebruik de methoden op de proxy-service om op te warmen, sessies aan te maken en vooraf op te halen

#

Github Demo
Chrome aangepaste tabbladen op StackOverflow

FAQ #

wanneer is dit beschikbaar op stable channel?
- Chrome aangepaste tabbladen zijn beschikbaar vanaf Chrome 45.
Waar Kan ik vragen stellen?
- StackOverflow-tag: Chrome-custom-tabs