Benutzerdefinierte Chrome-Registerkarten

BY admin
|

Was sind benutzerdefinierte Chrome-Registerkarten? #

App-Entwickler stehen vor der Wahl, wenn ein Benutzer auf eine URL tippt, um entweder einen Browser zu starten oder einen eigenen In-App-Browser mithilfe von WebViews zu erstellen.

Beide Optionen stellen Herausforderungen dar — das Starten des Browsers ist ein schwerer Kontextwechsel, der nicht anpassbar ist, während Webansichten den Status nicht mit dem Browser teilen und Wartungsaufwand verursachen.

Benutzerdefinierte Chrome-Registerkarten geben Apps mehr Kontrolle über ihre Weberfahrung und machen Übergänge zwischen nativen und Webinhalten nahtloser, ohne auf eine Webansicht zurückgreifen zu müssen.

Mit benutzerdefinierten Chrome-Registerkarten kann eine App das Erscheinungsbild von Chrome anpassen. Eine App kann Dinge ändern wie:

  • Symbolleistenfarbe
  • Animationen eingeben und beenden
  • Fügen Sie der Chrome-Symbolleiste, dem Überlaufmenü und der unteren Symbolleiste benutzerdefinierte Aktionen hinzu

Mit benutzerdefinierten Chrome-Registerkarten kann der Entwickler Chrome auch vorab starten und Inhalte vorab abrufen, um das Laden zu beschleunigen.

Sie können dies jetzt mit unserem Beispiel auf Github testen.

Wann sollte ich benutzerdefinierte Chrome-Registerkarten im Vergleich zu WebView verwenden? #

Die Webansicht ist eine gute Lösung, wenn Sie Ihre eigenen Inhalte in Ihrer App hosten. Wenn Ihre App Personen zu URLs außerhalb Ihrer Domain weiterleitet, empfehlen wir Ihnen, aus diesen Gründen benutzerdefinierte Chrome-Registerkarten zu verwenden:

  • Einfach zu implementieren. Sie müssen keinen Code erstellen, um Anforderungen, Genehmigungen oder Cookie-Speicher zu verwalten.

  • UI-Anpassung:

    • Symbolleistenfarbe
    • Aktionsschaltfläche
    • Benutzerdefinierte Menüelemente
    • Benutzerdefinierte In / Out-Animationen
    • Untere Symbolleiste

  • Navigationsbewusstsein: Der Browser sendet bei einer externen Navigation einen Rückruf an die Anwendung.

  • Sicherheit: Der Browser verwendet Google Safe Browsing, um den Benutzer und das Gerät vor gefährlichen Websites zu schützen.

  • Leistungsoptimierung:

    • Vorwärmen des Browsers im Hintergrund, während der Diebstahl von Ressourcen aus der Anwendung vermieden wird.
    • Bereitstellung einer wahrscheinlichen URL im Voraus für den Browser, die spekulative Arbeit ausführen und die Ladezeit der Seite beschleunigen kann.

  • Lifecycle Management: Der Browser verhindert, dass die Anwendung vom System entfernt wird, während sie sich darüber befindet, indem er ihre Bedeutung auf die Ebene „Vordergrund“ hebt.

  • Gemeinsames Cookie-Jar- und Berechtigungsmodell, sodass sich Benutzer nicht bei Websites anmelden müssen, mit denen sie bereits verbunden sind, oder bereits erteilte Berechtigungen erneut erteilen müssen.

  • Wenn der Benutzer Data Saver aktiviert hat, profitiert er weiterhin davon.

  • Synchronisierte automatische Vervollständigung auf allen Geräten für eine bessere Formularerfüllung.

  • Einfache anpassung modell.

  • Kehren Sie mit einem einzigen Tastendruck schnell zur App zurück.

  • Sie möchten die neuesten Browserimplementierungen auf Geräten vor Lollipop (automatische Aktualisierung von WebView) anstelle älterer WebViews verwenden.

Wann wird dies verfügbar sein? #

Ab Chrome 45 ist Chrome Custom Tabs jetzt allgemein für alle Chrome-Benutzer auf allen von Chrome unterstützten Android-Versionen (ab Jellybean) verfügbar.

Wir sind für Feedback, Fragen und Anregungen zu diesem Projekt suchen, so empfehlen wir Ihnen, Fragen zu Datei auf crbug.com und stellen Sie Fragen an unseren Twitter-Account @ChromiumDev.

Implementation guide #

Ein vollständiges Beispiel finden Sie unter https://github.com/GoogleChrome/custom-tabs-client. Es enthält wiederverwendbare Klassen zum Anpassen der Benutzeroberfläche, zum Herstellen einer Verbindung zum Hintergrunddienst und zum Verwalten des Lebenszyklus der Anwendung und der benutzerdefinierten Registerkartenaktivität.

Wenn Sie den Anweisungen auf dieser Seite folgen, können Sie eine großartige Integration erstellen.

Der erste Schritt für eine Integration benutzerdefinierter Registerkarten ist das Hinzufügen der Unterstützungsbibliothek für benutzerdefinierte Registerkarten zu Ihrem Projekt. Öffnen Sie Ihre build.gradle -Datei und fügen Sie die Support-Bibliothek zum Abschnitt Abhängigkeit hinzu.

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

Sobald die Support-Bibliothek zu Ihrem Projekt hinzugefügt wurde, gibt es zwei mögliche Anpassungen:

  • Anpassen der Benutzeroberfläche und Interaktion mit den benutzerdefinierten Registerkarten.
  • Dadurch wird die Seite schneller geladen und die Anwendung am Leben erhalten.

Die UI-Anpassungen werden mit den Klassen CustomTabsIntent und CustomTabsIntent.Builder vorgenommen; Die Leistungsverbesserungen werden mit CustomTabsClient erreicht, um eine Verbindung zum Dienst für benutzerdefinierte Registerkarten herzustellen, Chrome aufzuwärmen und ihm mitzuteilen, welche URLs geöffnet werden.

Öffnen einer benutzerdefinierten Chrome-Registerkarte #

Konfigurieren der Farbe der Adressleiste #

Einer der wichtigsten (und am einfachsten zu implementierenden) Aspekte von benutzerdefinierten Chrome-Registerkarten ist die Möglichkeit, die Farbe der Adressleiste so zu ändern, dass sie mit dem Thema Ihrer App übereinstimmt.

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

Konfigurieren einer benutzerdefinierten Aktionsschaltfläche #

Als Entwickler Ihrer App haben Sie die volle Kontrolle über die Aktionsschaltfläche, die Ihren Benutzern auf der Chrome-Registerkarte angezeigt wird.

In den meisten Fällen handelt es sich dabei um eine primäre Aktion, z. B. Freigeben, oder um eine andere allgemeine Aktivität, die Ihre Benutzer ausführen.

Die Aktionsschaltfläche wird als Bundle mit einem Symbol der Aktionsschaltfläche und einem PendingIntent dargestellt, das von Chrome aufgerufen wird, wenn Ihr Benutzer auf die Aktionsschaltfläche klickt. Das Symbol ist currenlty 24dp in der Höhe und 24-48 dp in der Breite.

Benutzerdefiniertes Menü konfigurieren #

Der Chrome-Browser verfügt über ein umfassendes Menü mit Aktionen, die Benutzer häufig in einem Browser ausführen, die jedoch möglicherweise nicht für Ihren Anwendungskontext relevant sind.

Als Entwickler können Sie bis zu fünf Menüelemente hinzufügen und anpassen, die zwischen der Symbolzeile und den Fußelementen angezeigt werden.

Das Menüelement wird durch Aufrufen von CustomTabsIntent.Builder#addMenuItem mit title und einem PendingIntent hinzugefügt, den Chrome in Ihrem Namen aufruft, wenn der Benutzer auf das Element tippt.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Benutzerdefinierte Ein- und Ausstiegsanimationen konfigurieren #

Viele Android-Anwendungen verwenden beim Übergang zwischen Aktivitäten auf Android benutzerdefinierte Ein- und Ausstiegsanimationen. Chrome Custom Tabs ist nicht anders, können Sie den Eingang und Ausgang ändern (wenn der Benutzer drückt zurück) Animationen, um sie im Einklang mit dem Rest der Anwendung zu halten.

Chrome aufwärmen, damit Seiten schneller geladen werden #

Wenn CustomTabsIntent#launchUrl aufgerufen wird, wird Chrome standardmäßig gestartet und die URL gestartet. Dies kann wertvolle Zeit in Anspruch nehmen und die Wahrnehmung von Glätte beeinträchtigen.

Wir glauben, dass Benutzer eine nahezu sofortige Erfahrung benötigen, daher haben wir in Chrome einen Dienst bereitgestellt, mit dem Ihre App eine Verbindung herstellen und Chrome anweisen kann, den Browser und die nativen Komponenten aufzuwärmen. Wir experimentieren auch mit der Möglichkeit für Sie, den Entwickler, Chrome mitzuteilen, welche Webseiten der Benutzer wahrscheinlich besuchen wird. Chrome wird dann in der Lage sein:

  • DNS-Vorauflösung der Hauptdomäne
  • DNS-Vorauflösung der wahrscheinlichsten Unterressourcen
  • Vorverbindung zum Ziel einschließlich HTTPS/TLS-Aushandlung.

Der Prozess zum Aufwärmen von Chrome ist wie folgt:

  • Verwenden Sie CustomTabsClient#bindCustomTabsService, um eine Verbindung zum Dienst herzustellen.
  • Sobald der Dienst verbunden ist, rufen Sie CustomTabsClient#warmup an, um Chrome hinter den Kulissen zu starten.
  • Rufen Sie CustomTabsClient#newSession auf, um eine neue Sitzung zu erstellen. Diese Sitzung wird für alle Anfragen an die API verwendet.
  • Fügen Sie beim Erstellen einer neuen Sitzung optional einen CustomTabsCallback als Parameter hinzu, damit Sie wissen, dass eine Seite geladen wurde.
  • Teilen Sie Chrome mit, welche Seiten der Benutzer wahrscheinlich mit CustomTabsSession#mayLaunchUrl laden wird.
  • Rufen Sie den CustomTabsIntent.Builder -Konstruktor auf und übergeben Sie den erstellten CustomTabsSession als Parameter.

Verbindung zum Chrome-Dienst herstellen #

Die CustomTabsClient#bindCustomTabsService -Methode vereinfacht die Verbindung zum benutzerdefinierten Tabs-Dienst.

Erstellen Sie eine Klasse, die CustomTabsServiceConnection erweitert, und verwenden Sie onCustomTabsServiceConnected , um eine Instanz von CustomTabsClient abzurufen. Diese Instanz wird für die nächsten Schritte benötigt.

Den Browserprozess aufwärmen #

boolean warmup(long flags)

Erwärmt den Browserprozess und lädt die nativen Bibliotheken. Warmup ist asynchron, der Rückgabewert gibt an, ob die Anforderung akzeptiert wurde. Mehrere erfolgreiche Aufrufe geben ebenfalls true zurück.

Gibt true für den Erfolg zurück.

Erstellen einer neuen Tab-Sitzung #

boolean newSession(CustomTabsCallback callback)

Session wird in nachfolgenden Aufrufen verwendet, um den mayLaunchUrl-Aufruf, das CustomTabsIntent und die generierte Registerkarte miteinander zu verknüpfen. Der hier bereitgestellte Rückruf ist der erstellten Sitzung zugeordnet. Alle Aktualisierungen für die erstellte Sitzung (siehe Rückruf für benutzerdefinierte Registerkarten unten) werden ebenfalls über diesen Rückruf empfangen. Gibt zurück, ob eine Sitzung erfolgreich erstellt wurde. Mehrere Aufrufe mit demselben CustomTabsCallback oder einem Nullwert geben false zurück.

Sagen Sie Chrome, welche URL der Benutzer wahrscheinlich öffnen wird #

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

Diese CustomTabsSession-Methode teilt dem Browser eine wahrscheinliche zukünftige Navigation zu einer URL mit. Die Methode warmup() sollte zuerst als Best Practice aufgerufen werden. Die wahrscheinlichste URL muss zuerst angegeben werden. Optional kann eine Liste anderer wahrscheinlicher URLs bereitgestellt werden. Sie werden als weniger wahrscheinlich als die erste behandelt und müssen in absteigender Prioritätsreihenfolge sortiert werden. Diese zusätzlichen URLs können ignoriert werden. Alle vorherigen Aufrufe dieser Methode werden priorisiert. Gibt zurück, ob der Vorgang erfolgreich abgeschlossen wurde.

Verbindungsrückruf für benutzerdefinierte Registerkarten #

void onNavigationEvent(int navigationEvent, Bundle extras)

Wird aufgerufen, wenn ein Navigationsereignis auf der Registerkarte Benutzerdefiniert stattfindet. Das ’navigationEvent int` ist einer von 6 Werten, die den Status der Seite definieren. Weitere Informationen finden Sie unten.

Was passiert, wenn der Benutzer keine aktuelle Version von Chrome installiert hat? #

Benutzerdefinierte Registerkarten verwendet eine ACTION_VIEW-Absicht mit wichtigen Extras, um die Benutzeroberfläche anzupassen. Dies bedeutet, dass standardmäßig die Seite wirdöffnen Sie im Systembrowser oder im Standardbrowser des Benutzers.

Wenn der Benutzer Chrome installiert hat und es sich um den Standardbrowser handelt, werden die EXTRAS automatisch abgerufen und eine benutzerdefinierte Benutzeroberfläche angezeigt. Es ist auch möglich, dass ein anderer Browser die Intent-Extras verwendet, um eine ähnliche benutzerdefinierte Oberfläche bereitzustellen.

Wie kann ich überprüfen, ob Chrome benutzerdefinierte Chrome-Registerkarten unterstützt? #

Alle Versionen von Chrome, die benutzerdefinierte Chrome-Registerkarten unterstützen, stellen einen Dienst bereit. Um zu überprüfen, ob Chrome benutzerdefinierte Registerkarten unterstützt, versuchen Sie, eine Bindung an den Dienst herzustellen. Wenn dies gelingt, können benutzerdefinierte Registerkarten sicher verwendet werden.

Best Practices #

Seit dem Start von Chrome Custom Tabs haben wir verschiedene Implementierungen mit unterschiedlichen Qualitätsstufen gesehen. Dieser Abschnitt beschreibt eine Reihe von Best Practices, die wir gefunden haben, um eine gute Integration zu erstellen.

Stellen Sie eine Verbindung zum Dienst für benutzerdefinierte Registerkarten her und rufen Sie warmup() # auf

Sie können bis zu 700 ms sparen, wenn Sie einen Link mit den benutzerdefinierten Registerkarten öffnen, indem Sie eine Verbindung zum Dienst herstellen und Chrome vorladen.

Stellen Sie mit der Methode onStart() der Aktivitäten, von denen aus Sie eine benutzerdefinierte Registerkarte starten möchten, eine Verbindung zum Dienst Benutzerdefinierte Registerkarten her. Rufen Sie nach der Verbindung warmup() auf.

Das Laden erfolgt als Prozess mit niedriger Priorität, was bedeutet, dass es keine negativen Auswirkungen auf die Leistung Ihrer Anwendung hat, aber beim Laden eines Links einen großen Leistungsschub bewirkt.

Inhalt vor dem Rendern #

Durch das Vorrendern werden externe Inhalte sofort geöffnet. Rufen Sie die mayLaunchUrl() -Methode auf, als hätte Ihr Benutzer eine Wahrscheinlichkeit von mindestens 50%, auf den Link zu klicken.

Der Aufruf von mayLaunchUrl() bewirkt, dass benutzerdefinierte Registerkarten die Hauptseite mit dem unterstützenden Inhalt vorab abrufen und vorrendern. Dies gibt die maximale Geschwindigkeit bis zum Laden der Seite, ist jedoch mit Netzwerk- und Batteriekosten verbunden.

Custom Tabs ist intelligent und weiß, ob der Benutzer das Telefon in einem gemessenen Netzwerk verwendet oder ob es sich um ein Low-End-Gerät handelt. Es ist also nicht erforderlich, Ihre Anwendung für diese Fälle zu optimieren.

Fallback bereitstellen, wenn benutzerdefinierte Registerkarten nicht installiert sind #

Obwohl benutzerdefinierte Registerkarten für die große Mehrheit der Benutzer verfügbar sind, gibt es einige Szenarien, in denen ein Browser, der benutzerdefinierte Registerkarten unterstützt, nicht auf dem Gerät installiert ist oder das Gerät keine Browserversion unterstützt, in der benutzerdefinierte Registerkarten aktiviert sind.

Stellen Sie sicher, dass Sie einen Fallback bereitstellen, der eine gute Benutzererfahrung bietet, indem Sie entweder den Standardbrowser öffnen oder Ihre eigene WebView-Implementierung verwenden.

Fügen Sie Ihre App als Referrer hinzu #

Für Websites ist es normalerweise sehr wichtig zu verfolgen, woher ihr Datenverkehr kommt. Stellen Sie sicher, dass Sie sie wissen lassen, dass Sie ihnen Benutzer senden, indem Sie den Referrer festlegen, wenn Sie Ihre benutzerdefinierte Registerkarte starten

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

Benutzerdefinierte Animationen hinzufügen #

Benutzerdefinierte Animationen machen den Übergang von Ihrer Anwendung zum Webinhalt reibungsloser. Stellen Sie sicher, dass die Zielanimation die Umkehrung der Startanimation ist, da dies dem Benutzer hilft zu verstehen, dass er zu dem Inhalt zurückkehrt, an dem die Navigation begonnen hat.

Auswählen eines Symbols für die Aktionsschaltfläche #

Durch Hinzufügen einer Aktionsschaltfläche können Benutzer die Funktionen Ihrer App besser nutzen. Wenn es jedoch kein gutes Symbol für die Aktion gibt, die Ihre Aktionsschaltfläche ausführt, erstellen Sie eine Bitmap mit einem Text, der die Aktion beschreibt.

Denken Sie daran, die maximale Größe für die Bitmap ist 24dp Höhe x 48dp Breite.

Vorbereitung für andere Browser #

Denken Sie daran, dass der Benutzer möglicherweise mehr als einen Browser installiert hat, der benutzerdefinierte Registerkarten unterstützt. Wenn es mehr als einen Browser gibt, der benutzerdefinierte Registerkarten unterstützt, und keinen, wenn dies der bevorzugte Browser ist, fragen Sie den Benutzer, wie er den Link öffnen möchte

Dem Benutzer erlauben, benutzerdefinierte Registerkarten zu deaktivieren #

Fügen Sie der Anwendung eine Option hinzu, mit der der Benutzer Links im Standardbrowser öffnen kann, anstatt einen benutzerdefinierten Tab zu verwenden. Dies ist besonders wichtig, wenn die Anwendung den Link über den Browser geöffnet hat, bevor die Unterstützung für benutzerdefinierte Registerkarten hinzugefügt wurde.

Lassen Sie native Anwendungen den Inhalt verarbeiten #

Einige URLs können von nativen Anwendungen verarbeitet werden. Wenn der Nutzer die Twitter-App installiert hat und auf einen Link zu einem Tweet klickt. Sie erwartet, dass die Twitter-Anwendung damit umgehen wird.

Überprüfen Sie vor dem Öffnen einer URL aus Ihrer Anwendung, ob eine native Alternative verfügbar ist, und verwenden Sie sie.

Anpassen der Symbolleistenfarbe #

Passen Sie die Primärfarbe Ihrer Anwendung an, wenn der Benutzer das Gefühl haben soll, dass der Inhalt Teil Ihrer Anwendung ist.

Wenn Sie dem Benutzer klar machen möchten, dass er Ihre Anwendung verlassen hat, passen Sie die Farbe überhaupt nicht an.

Fügen Sie eine Freigabeaktion hinzu #

Stellen Sie sicher, dass Sie die Freigabeaktion zum Überlaufmenü hinzufügen, da Benutzer in den meisten Anwendungsfällen erwarten, dass sie den Link zu dem Inhalt freigeben können, den sie sehen, und benutzerdefinierte Registerkarten fügen standardmäßig keinen hinzu.

Schaltfläche Schließen anpassen #

Passen Sie die Schaltfläche Schließen an, damit sich die benutzerdefinierte Registerkarte als Teil Ihrer Anwendung anfühlt.

Wenn der Benutzer das Gefühl haben soll, dass benutzerdefinierte Registerkarten ein modales Dialogfeld sind, verwenden Sie die Standardschaltfläche „X“. Wenn Sie möchten, dass der Benutzer das Gefühl hat, dass die benutzerdefinierte Registerkarte Teil des Anwendungsflusses ist, verwenden Sie den Zurück-Pfeil.

Interne Links behandeln #

Wenn Sie Klicks auf von android:AutoLink generierte Links abfangen oder Klicks auf Links in Webansichten überschreiben, stellen Sie sicher, dass Ihre Anwendung die internen Links verarbeitet und die benutzerdefinierten Registerkarten die externen verarbeiten.

Mehrere Klicks verarbeiten #

Wenn Sie eine Verarbeitung zwischen dem Benutzer, der auf einen Link klickt, und dem Öffnen der benutzerdefinierten Registerkarte durchführen müssen, stellen Sie sicher, dass sie in weniger als 100 ms ausgeführt wird. Andernfalls wird die Reaktionsfähigkeit angezeigt und möglicherweise versucht, mehrmals auf den Link zu klicken.

Wenn die Verzögerung nicht vermieden werden kann, stellen Sie sicher, dass Ihre Anwendung darauf vorbereitet ist, wenn ein Benutzer mehrmals auf denselben Link klickt und eine benutzerdefinierte Registerkarte nicht mehrmals öffnet.

Low-Level-API #

Obwohl die empfohlene Methode zur Integration Ihrer Anwendung in benutzerdefinierte Registerkarten die Verwendung der Unterstützungsbibliothek für benutzerdefinierte Registerkarten ist, ist auch eine Low-Level-Implementierung verfügbar.

Die vollständige Implementierung der Support-Bibliothek ist auf Github verfügbar und kann als Startpunkt verwendet werden. Es enthält auch die AIDL-Dateien, die für die Verbindung mit dem Dienst erforderlich sind, da die im Chromium-Repository enthaltenen Dateien nicht direkt mit Android Studio verwendet werden können.

Grundlagen zum Starten benutzerdefinierter Registerkarten mithilfe der Low-Level-API #

Hinzufügen von UI-Anpassungen #

UI-Anpassungen werden durch Hinzufügen von Extras zum ACTION_VIEW Intent . Eine vollständige Liste der zum Anpassen der Benutzeroberfläche verwendeten Extras-Schlüssel finden Sie in den CustomTabsIntent-Dokumenten. Ein Beispiel zum Hinzufügen einer benutzerdefinierten Symbolleistenfarbe folgt:

Verbinden mit dem Dienst für benutzerdefinierte Registerkarten #

Der Dienst für benutzerdefinierte Registerkarten kann auf die gleiche Weise verwendet werden wie andere Android-Dienste. Die Schnittstelle wird mit AIDL erstellt und erstellt automatisch eine Proxy-Serviceklasse für Sie.

Verwenden Sie die Methoden des Proxy-Dienstes, um sich aufzuwärmen, Sitzungen zu erstellen und vorab abzurufen

Nützliche Links #

  • Github-Demo
  • Benutzerdefinierte Chrome-Registerkarten auf StackOverflow

FAQ #

  • Wann wird dies auf Stable Channel verfügbar sein?
    • Chrome Benutzerdefinierte Registerkarten sind ab Chrome 45 verfügbar.
  • Wo kann ich Fragen stellen?
    • Stackoverflow-Tag: Chrome-benutzerdefinierte Registerkarten