niestandardowe karty Chrome

BY admin
|

co to są niestandardowe karty Chrome? #

twórcy aplikacji stają przed wyborem, gdy użytkownik dotknie adresu URL, aby uruchomić przeglądarkę lub zbudować własną przeglądarkę w aplikacji za pomocą WebViews.

obie opcje stanowią wyzwanie-uruchomienie przeglądarki to ciężki przełącznik kontekstowy, który nie jest konfigurowalny, podczas gdy WebViews nie współdzielą stanu z przeglądarką i dodają koszty konserwacji.

niestandardowe karty Chrome zapewniają aplikacjom większą kontrolę nad ich działaniem w sieci i sprawiają, że przejścia między natywną i internetową zawartością są bardziej płynne bez konieczności uciekania się do widoku sieci Web.

niestandardowe karty Chrome pozwalają aplikacji dostosować wygląd i wrażenia Chrome. Aplikacja może zmienić takie rzeczy jak:

  • kolor paska narzędzi
  • animacje wejścia i wyjścia
  • Dodaj własne akcje do paska narzędzi Chrome, menu przepełnienia i dolnego paska narzędzi

niestandardowe karty Chrome umożliwiają również programistom wstępne uruchomienie Chrome i wstępne pobranie zawartości w celu szybszego ładowania.

możesz to teraz przetestować za pomocą naszej próbki na Githubie.

Kiedy powinienem używać niestandardowych kart Chrome vs WebView? #

WebView jest dobrym rozwiązaniem, jeśli hostujesz własne treści w swojej aplikacji. Jeśli Twoja aplikacja przekierowuje ludzi do adresów URL spoza twojej domeny, zalecamy użycie niestandardowych kart Chrome z następujących powodów:

  • prosty do wdrożenia. Nie ma potrzeby tworzenia kodu do zarządzania żądaniami, zezwoleniami lub przechowywaniem plików cookie.

  • dostosowanie interfejsu użytkownika:

    • kolor paska narzędzi
    • przycisk akcji
    • niestandardowe elementy menu
    • niestandardowe animacje wejścia / wyjścia
    • dolny pasek narzędzi

  • świadomość nawigacji: przeglądarka dostarcza wywołanie zwrotne do aplikacji po zewnętrznej nawigacji.

  • bezpieczeństwo: przeglądarka korzysta z Bezpiecznego przeglądania Google, aby chronić użytkownika i urządzenie przed niebezpiecznymi witrynami.

  • optymalizacja wydajności:

    • wstępne nagrzewanie przeglądarki w tle, przy jednoczesnym unikaniu kradzieży zasobów z aplikacji.
    • podanie z góry prawdopodobnego adresu URL do przeglądarki, który może wykonywać pracę spekulacyjną, przyspieszając czas ładowania strony.

  • zarządzanie cyklem życia: przeglądarka zapobiega eksmitowaniu aplikacji przez system, gdy jest na niej, podnosząc jej znaczenie do poziomu” pierwszego planu”.

  • udostępniony plik cookie jar i model uprawnień, dzięki czemu użytkownicy nie muszą logować się do witryn, z którymi są już połączeni, ani ponownie przyznawać już przyznanych uprawnień.

  • jeśli użytkownik włączył funkcję oszczędzania danych, nadal będzie z niej korzystać.

  • zsynchronizowane Autouzupełnianie na różnych urządzeniach dla lepszego wypełniania formularzy.

  • prosty model dostosowywania.

  • szybko wróć do aplikacji jednym dotknięciem.

  • chcesz używać najnowszych implementacji przeglądarki na urządzeniach pre-Lollipop (auto update WebView) zamiast starszych WebViews.

kiedy to będzie dostępne? #

począwszy od Chrome 45, niestandardowe karty Chrome są teraz ogólnie dostępne dla wszystkich użytkowników Chrome, we wszystkich obsługiwanych wersjach Chrome Android (od Jellybean).

szukamy opinii, pytań i sugestii na temat tego projektu, więc zachęcamy do zgłaszania problemów na crbug.com i zadawaj pytania na nasze konto na Twitterze @ ChromiumDev .

Przewodnik po implementacji #

kompletny przykład jest dostępny pod adresem https://github.com/GoogleChrome/custom-tabs-client. Zawiera klasy wielokrotnego użytku, aby dostosować interfejs użytkownika, połączyć się z usługą w tle i obsługiwać cykl życia zarówno aplikacji, jak i aktywności na karcie niestandardowej.

jeśli zastosujesz się do wskazówek z tej strony, będziesz w stanie stworzyć świetną integrację.

pierwszym krokiem integracji niestandardowych kart jest dodanie biblioteki obsługi niestandardowych kart do projektu. Otwórz plik build.gradle i dodaj bibliotekę wsparcia do sekcji zależności.

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

po dodaniu biblioteki wsparcia do projektu istnieją dwa zestawy możliwych dostosowań:

  • Dostosowywanie interfejsu użytkownika i interakcja z niestandardowymi kartami.
  • szybsze ładowanie strony i utrzymanie aplikacji przy życiu.

dostosowania interfejsu użytkownika są wykonywane za pomocą klas CustomTabsIntent i CustomTabsIntent.Builder; poprawa wydajności jest osiągana za pomocą CustomTabsClient aby połączyć się z usługą niestandardowe karty, rozgrzej Chrome i poinformuj go, które adresy URL zostaną otwarte.

otwarcie niestandardowej karty Chrome #

Skonfiguruj kolor paska adresu #

jednym z najważniejszych (i najprostszych do wdrożenia) aspektów niestandardowych kart Chrome jest możliwość zmiany koloru paska adresu, aby był zgodny z motywem aplikacji.

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

Konfigurowanie niestandardowego przycisku akcji#

jako twórca aplikacji masz pełną kontrolę nad przyciskiem akcji, który jest wyświetlany użytkownikom na karcie Chrome.

w większości przypadków będzie to działanie podstawowe, takie jak udostępnienie lub inna wspólna aktywność, którą wykonają użytkownicy.

przycisk akcji jest reprezentowany jako pakiet z ikoną przycisku akcji i pendingIntent, który zostanie wywołany przez Chrome, gdy użytkownik naciśnie przycisk akcji. Ikona ma wysokość 24dp i szerokość 24-48 dp.

Skonfiguruj własne menu #

przeglądarka Chrome ma obszerne menu działań, które użytkownicy będą często wykonywać w przeglądarce, jednak mogą one nie być istotne dla kontekstu aplikacji.

jako programista możesz dodawać i dostosowywać do pięciu elementów menu, które pojawią się między wierszem ikon a elementami stóp.

element menu jest dodawany przez wywołanie CustomTabsIntent.Builder#addMenuItem z tytułem i pendingintentem, który Chrome wywoła w Twoim imieniu, gdy użytkownik dotknie elementu są przekazywane jako parametry.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Konfigurowanie niestandardowych animacji wejścia i wyjścia #

wiele aplikacji na Androida używa niestandardowych animacji wejścia i wyjścia widoku podczas przechodzenia między działaniami na Androidzie. Niestandardowe karty Chrome nie różnią się od siebie, możesz zmienić animacje wejścia i wyjścia (gdy użytkownik naciśnie przycisk Wstecz), aby zachować ich spójność z resztą aplikacji.

rozgrzej Chrome, aby strony ładowały się szybciej #

domyślnie, gdy zostanie wywołana CustomTabsIntent#launchUrl, uruchomi Chrome i uruchomi adres URL. Może to zająć cenny czas i wpłynąć na postrzeganie gładkości.

uważamy, że użytkownicy wymagają niemal natychmiastowego działania, dlatego udostępniliśmy w Chrome usługę, z którą Twoja aplikacja może się połączyć i powiedzieć Chrome, aby rozgrzała przeglądarkę i natywne komponenty. Eksperymentujemy również z możliwością poinformowania Chrome o prawdopodobnym zestawie stron internetowych, które użytkownik odwiedzi. Chrome będzie wtedy w stanie wykonać:

  • pre-resolution DNS domeny głównej
  • pre-resolution DNS najbardziej prawdopodobnych zasobów podrzędnych
  • Pre-connection to the destination including HTTPS/TLS negotiation.

proces podgrzewania chromu wygląda następująco:

  • użyj CustomTabsClient#bindCustomTabsService, aby połączyć się z usługą.
  • po podłączeniu usługi Zadzwoń do CustomTabsClient#warmup, aby uruchomić Chrome za kulisami.
  • zadzwoń do CustomTabsClient#newSession, aby utworzyć nową sesję. Ta sesja jest używana dla wszystkich żądań do API.
  • Opcjonalnie, Dołącz CustomTabsCallback jako parametr podczas tworzenia nowej sesji, aby wiedzieć, że strona została załadowana.
  • powiedz Chrome, które strony użytkownik prawdopodobnie załaduje CustomTabsSession#mayLaunchUrl.
  • wywołanie konstruktora CustomTabsIntent.Builder przekazując utworzony CustomTabsSession jako parametr.

Połącz się z usługą Chrome #

metoda CustomTabsClient#bindCustomTabsService eliminuje złożoność łączenia się z usługą niestandardowych kart.

Utwórz klasę, która rozszerza CustomTabsServiceConnection i użyj onCustomTabsServiceConnected, aby uzyskać instancję CustomTabsClient. Ta instancja będzie potrzebna w kolejnych krokach.

rozgrzej proces przeglądarki #

boolean warmup(long flags)

rozgrzewa proces przeglądarki i ładuje natywne biblioteki. Warmup jest asynchroniczny, wartość zwracana wskazuje, czy żądanie zostało zaakceptowane. Wiele pomyślnych połączeń również zwróci true.

zwraca true na sukces.

Utwórz nową sesję karty#

boolean newSession(CustomTabsCallback callback)

sesja jest używana w kolejnych wywołaniach, aby połączyć wywołanie mayLaunchUrl, CustomTabsIntent i kartę wygenerowaną do siebie. Wywołanie zwrotne podane tutaj jest powiązane z utworzoną sesją. Wszelkie aktualizacje dla utworzonej sesji (Zobacz niestandardowe karty wywołania zwrotnego poniżej) są również odbierane za pośrednictwem tego wywołania zwrotnego. Zwraca, czy sesja została utworzona pomyślnie. Wiele wywołań z tym samym CustomTabsCallback lub wartością null zwróci false.

powiedz Chrome jaki adres URL może otworzyć użytkownik#

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

ta metoda CustomTabsSession informuje przeglądarkę o prawdopodobnej przyszłej nawigacji do adresu URL. Metoda warmup() powinna być najpierw nazwana jako najlepsza praktyka. Najpierw należy podać najbardziej prawdopodobny adres URL. Opcjonalnie można podać listę innych prawdopodobnych adresów URL. Są one traktowane jako mniej prawdopodobne Od pierwszego i muszą być sortowane w kolejności malejącej. Te dodatkowe adresy URL mogą być ignorowane. Wszystkie poprzednie wywołania tej metody zostaną pozbawione. Zwraca, czy operacja zakończyła się pomyślnie.

Custom Tabs Connection Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

zostanie wywołany, gdy dojdzie do zdarzenia nawigacyjnego na karcie niestandardowej. 'NavigationEvent int’ jest jedną z 6 wartości określających Stan strony, w której znajduje się. Zobacz poniżej, aby uzyskać więcej informacji.

co się stanie, jeśli użytkownik nie ma zainstalowanej najnowszej wersji Chrome? #

niestandardowe karty używają intencji ACTION_VIEW z kluczowymi dodatkami, aby dostosować interfejs użytkownika. Oznacza to, że domyślnie strona będzieotwarta w przeglądarce systemowej lub domyślnej przeglądarki użytkownika.

jeśli użytkownik ma zainstalowaną przeglądarkę Chrome i jest to domyślna przeglądarka, automatycznie pobierze dodatki i wyświetli dostosowany interfejs użytkownika. Możliwe jest również, aby inna przeglądarka używała dodatków Intent, aby zapewnić podobny niestandardowy interfejs.

Jak mogę sprawdzić, czy Chrome obsługuje niestandardowe karty Chrome? #

wszystkie wersje Chrome obsługujące niestandardowe karty Chrome udostępniają usługę. Aby sprawdzić, czy Chrome obsługuje niestandardowe karty, spróbuj powiązać z usługą. Jeśli to się powiedzie, można bezpiecznie używać niestandardowych kart.

najlepsze praktyki #

od czasu uruchomienia niestandardowych kart Chrome widzieliśmy różne implementacje o różnych poziomach jakości. W tej sekcji opisano zestaw najlepszych praktyk, które znaleźliśmy w celu stworzenia dobrej integracji.

Połącz się z usługą niestandardowe karty i wywołaj warmup () #

możesz zaoszczędzić do 700 ms podczas otwierania łącza z niestandardowymi kartami, łącząc się z usługą i wstępnie ładując Chrome.

Połącz się z usługą niestandardowe karty w metodzie onStart() działań, z których planujesz uruchomić niestandardową kartę. Po połączeniu, wywołanie warmup ().

ładowanie odbywa się jako proces o niskim priorytecie, co oznacza, że nie będzie miało negatywnego wpływu na wydajność aplikacji, ale zapewni duży wzrost wydajności podczas ładowania łącza.

wstępnie renderowana zawartość #

wstępnie renderowana spowoduje natychmiastowe otwarcie zewnętrznej zawartości. Tak więc, jeśli twój użytkownik ma co najmniej 50% prawdopodobieństwa kliknięcia w link, wywołaj metodę mayLaunchUrl ().

wywołanie mayLaunchUrl() spowoduje, że niestandardowe karty będą wstępnie pobierać stronę główną z zawartością pomocniczą i wstępnie renderować. Da to maksymalną szybkość procesu ładowania strony, ale wiąże się z kosztem sieci i baterii.

niestandardowe karty jest inteligentny i wie, czy użytkownik korzysta z telefonu w sieci z pomiarem lub czy jest to urządzenie z niskim poziomem mocy, a wstępne renderowanie będzie miało negatywny wpływ na ogólną wydajność urządzenia i nie będzie wstępnie pobierać ani wstępnie renderować w tych scenariuszach. Nie ma więc potrzeby optymalizacji aplikacji pod kątem takich przypadków.

Zapewnij rezerwę, gdy niestandardowe karty nie są zainstalowane #

chociaż niestandardowe karty są dostępne dla większości użytkowników, istnieją pewne scenariusze, w których przeglądarka obsługująca niestandardowe karty nie jest zainstalowana na urządzeniu lub urządzenie nie obsługuje wersji przeglądarki z włączonymi niestandardowymi kartami.

upewnij się, że zapewniasz rezerwę, która zapewnia dobre wrażenia użytkownika, otwierając domyślną przeglądarkę lub korzystając z własnej implementacji widoku sieci Web.

Dodaj swoją aplikację jako referrer #

zazwyczaj bardzo ważne jest, aby witryny internetowe śledziły, skąd pochodzi ich ruch. Upewnij się, że dajesz im znać, że wysyłasz im użytkowników, ustawiając referrer podczas uruchamiania niestandardowej karty

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

Dodaj niestandardowe animacje #

niestandardowe animacje sprawią, że przejście z aplikacji do zawartości internetowej będzie płynniejsze. Upewnij się, że animacja końcowa jest odwrotna do animacji początkowej, ponieważ pomoże to użytkownikowi zrozumieć, że wraca do treści, w której rozpoczęła się nawigacja.

wybranie ikony przycisku akcji #

Dodanie przycisku akcji sprawi, że użytkownicy będą bardziej angażować się w funkcje Twojej aplikacji. Jeśli jednak nie ma odpowiedniej ikony do reprezentowania akcji, którą wykona przycisk akcji, Utwórz bitmapę z tekstem opisującym akcję.

pamiętaj maksymalny rozmiar bitmapy to 24dp wysokość x 48DP szerokość.

przygotowanie do innych przeglądarek #

pamiętaj użytkownik może mieć zainstalowaną więcej niż jedną przeglądarkę, która obsługuje niestandardowe karty. Jeśli istnieje więcej niż jedna przeglądarka, która obsługuje niestandardowe karty, a żadna, jeśli jest to preferowana przeglądarka, zapytaj użytkownika, w jaki sposób chce otworzyć łącze

Zezwól użytkownikowi na rezygnację z niestandardowych kart #

Dodaj opcję do aplikacji, aby użytkownik otwierał łącza w domyślnej przeglądarce zamiast używać niestandardowej karty. Jest to szczególnie ważne, jeśli aplikacja otworzyła link za pomocą przeglądarki przed dodaniem obsługi niestandardowych kart.

pozwól aplikacjom natywnym obsługiwać zawartość #

niektóre adresy URL mogą być obsługiwane przez aplikacje natywne. Jeśli użytkownik ma zainstalowaną aplikację Twitter i kliknie link do tweeta. Oczekuje, że aplikacja Twitter zajmie się tym.

przed otwarciem adresu url w aplikacji sprawdź, czy dostępna jest natywna alternatywa i użyj jej.

Dostosuj kolor paska narzędzi #

Dostosuj kolor podstawowy aplikacji, jeśli chcesz, aby użytkownik czuł, że zawartość jest częścią twojej aplikacji.

jeśli chcesz wyjaśnić użytkownikowi, że opuściła Twoją aplikację, nie dostosowuj w ogóle koloru.

Dodaj akcję Udostępnij #

upewnij się, że dodałeś akcję Udostępnij do menu przepełnienia, ponieważ użytkownicy oczekują, że będą mogli udostępnić link do zawartości, którą widzą w większości przypadków użycia, A zakładki niestandardowe nie dodają jej domyślnie.

Dostosuj przycisk Zamknij #

Dostosuj przycisk zamknij, aby karta Niestandardowa czuła, że jest częścią twojej aplikacji.

jeśli chcesz, aby użytkownik czuł, że niestandardowe karty są modalnym oknem dialogowym, Użyj domyślnego przycisku „X”. Jeśli chcesz, aby użytkownik czuł, że karta niestandardowa jest częścią przepływu aplikacji, Użyj strzałki wstecz.

Obsługa linków wewnętrznych #

przechwytując kliknięcia linków generowanych przez Androida: autoLink lub nadpisując kliknięcia linków w przeglądarkach internetowych, upewnij się, że Twoja aplikacja obsługuje linki wewnętrzne, a karty niestandardowe obsługują te zewnętrzne.

Obsługa wielu kliknięć #

jeśli musisz wykonać jakiekolwiek przetwarzanie między użytkownikiem klikającym łącze i otwierającym kartę niestandardową, upewnij się, że działa on w czasie poniżej 100 ms. W przeciwnym razie ludzie zobaczą Brak odpowiedzi i mogą próbować kliknąć wiele razy łącze.

jeśli nie można uniknąć opóźnienia, upewnij się, że aplikacja jest przygotowana na to, że użytkownik kliknie wiele razy ten sam link i nie otworzy zakładki niestandardowej wiele razy.

interfejs API niskiego poziomu #

chociaż zalecaną metodą integracji aplikacji z niestandardowymi kartami jest użycie biblioteki obsługi niestandardowych kart, dostępna jest również implementacja niskiego poziomu.

pełna implementacja biblioteki wsparcia jest dostępna na Githubie i jest używana jako punkt początkowy. Zawiera również pliki AIDL wymagane do połączenia się z usługą, ponieważ te zawarte w repozytorium Chromium nie są bezpośrednio używane z Android Studio.

podstawy uruchamiania niestandardowych kart przy użyciu interfejsu API niskiego poziomu #

dodawanie dostosowań interfejsu użytkownika #

dostosowywania interfejsu użytkownika są uwzględniane przez dodanie dodatków do intencji ACTION_VIEW. Pełną listę kluczy dodatków używanych do personalizacji interfejsu można znaleźć w dokumentacji CustomTabsIntent. Poniżej znajduje się przykład dodawania niestandardowego koloru paska narzędzi:

łączenie się z usługą niestandardowych kart #

usługa niestandardowych kart może być używana w taki sam sposób, jak inne usługi Androida. Interfejs jest tworzony za pomocą AIDL i automatycznie tworzy klasę usługi proxy dla Ciebie.

użyj metod w usłudze proxy do rozgrzewki, tworzenia sesji i wstępnego pobierania

Przydatne linki #

  • Demo Github
  • niestandardowe karty Chrome na StackOverflow

FAQ #

  • kiedy będzie to dostępne na stabilnym kanale?
    • niestandardowe karty Chrome są dostępne od Chrome 45.
  • Gdzie mogę zadawać pytania?
    • Stackoverflow tag: chrome-custom-tabs