Make full use of Chrome Custom Tabs

12f91ebd556cc5b1e88e16e5fd47549b?s=47 sakebook
March 10, 2017

Make full use of Chrome Custom Tabs

Presentation about Chrome Custom Tabs in DroidKaigi 2017.

12f91ebd556cc5b1e88e16e5fd47549b?s=128

sakebook

March 10, 2017
Tweet

Transcript

  1. 8.
  2. 9.

    • Login once, run device. • Cookie is shared, so

    input complementation • Data using can be reduced using Chrome's Data Saver • Faster than WebView • High-security
  3. 10.
  4. 11.

    • Development related to WebView is unnecessary • INTERNET permission

    is also unnecessary • there is no need to consider OS version and device version.
  5. 12.
  6. 16.

    Table of Contents(1/2) • Introduction of CCT • Chrome family

    • Sample code • Customize • Toolbar • Animation • Request • OAuth
  7. 17.

    Table of Contents(2/2) • Secondly Toolbar • Bottom Bar •

    Remote View • Warmup • Prefetch • Event • Session • CCT’s future
  8. 22.

    • Chrome : 56.0.2924.87 • Chrome bera : 57.0.2987.97 •

    Chrome dev : 58.0.3026.5 • Chrome canary : 59.0.3036.0 2017/3/10
  9. 23.

    • Chrome : v • Chrome bera : v +

    1 • Chrome dev : v + 2 • Chrome canary : v + 3
  10. 27.

    • demos/ • Demo application with support library CCT •

    customtabs/ • Library of CCT. It is almost the same as the support library, but there are functions that have not yet been provided. • Application/ • Demo application using customtabs • shared/ • Module of reusable utility class
  11. 29.

    sakebook/ CustomTabsSample • I use official “customtabs/” and “shared/” •

    “customtabs/” and support library can be easily replaced by app/ build.gradle https://github.com/sakebook/CustomTabsSample
  12. 31.
  13. 39.

    • There can also change the close button • But

    there is no tint option default
  14. 40.

    • Up to five menu items can be added •

    Implement with
 PendingIntent default
  15. 46.

    The received Intent contains url of the page being displayed

    https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/customtabs/ CustomTabIntentDataProvider.java#367
  16. 59.

    “On April 20, 2017, we will start blocking OAuth requests

    using web-views for all OAuth clients on platforms where viable alternatives exist.” https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native- apps.html
  17. 62.

    • (1) Authz Request • Client App -> Browser •

    (2) Authz Request • Browser -> Endpoint https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
  18. 63.

    • (1) Authz Request • Client App -> Browser •

    (2) Authz Request • Browser -> Endpoint • (3) Authz Code • Endpoint -> Browser https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
  19. 64.

    • (1) Authz Request • Client App -> Browser •

    (2) Authz Request • Browser -> Endpoint • (3) Authz Code • Endpoint -> Browser • (4) Authz Code • Browser -> Client App https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
  20. 65.

    • (1) Authz Request • Client App -> Browser •

    (2) Authz Request • Browser -> Endpoint • (3) Authz Code • Endpoint -> Browser • (4) Authz Code • Browser -> Client App • (5) Authz Code • Client App -> Endpoint https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
  21. 66.

    • (1) Authz Request • Client App -> Browser •

    (2) Authz Request • Browser -> Endpoint • (3) Authz Code • Endpoint -> Browser • (4) Authz Code • Browser -> Client App • (5) Authz Code • Client App -> Endpoint • (6)Access Token • Endpoint -> Client App https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
  22. 67.

    • (1) Authz Request • Client App -> CCT •

    (2) Authz Request • CCT -> Endpoint • (3) Authz Code • Endpoint -> CCT • (4) Authz Code • CCT -> Client App • (5) Authz Code • Client App -> Endpoint • (6)Access Token • Endpoint -> Client App https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08 CCT
  23. 68.

    • (1) Authz Request • Client App -> CCT •

    (2) Authz Request • CCT -> Endpoint • (3) Authz Code • Endpoint -> CCT • (4) Authz Code • CCT -> Client App • (5) Authz Code • Client App -> Endpoint • (6)Access Token • Endpoint -> Client App https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
  24. 69.
  25. 76.

    Remote Views? • View that can be added on the

    CCT https://developer.android.com/reference/android/widget/RemoteViews.html
  26. 77.

    • Position is the bottom only • The default background

    is black(white). • Cannot transparent. ?android:attr/actionBarSize wrap_content
  27. 78.

    • Max height is 56dp • Only the background is

    drawn 200dp ?android:attr/actionBarSize
  28. 81.
  29. 82.

    Warmup? • the following • “DNS pre-resolution of the main

    domain” • “DNS pre-resolution of the most likely sub- resources” • “Pre-connection to the destination including HTTPS/TLS negotiation.” https://developer.chrome.com/multidevice/android/customtabs#warm-up chrome to make pages load faster
  30. 87.
  31. 93.

    • URL loading and tab state • URL currently not

    available yet • tab state is buggy 200dp
  32. 101.

    • A different URL can be inserted for the same

    Session • Not only web link. • However, triggers are user actions.
  33. 105.

    • Instant Apps • I don’ t have a compatible

    device… • CustomTabsIntent.setInstantAppsE nabled
  34. 107.

    • Implicit intent is also opened in CCT • Chromium

    for Android • Avoidance methods are provided • CustomTabsIntent.setAlwaysUseBr owserUI Intent = intent = new Intent(Intent.ACTION_VIEW); 
 intent.setData(Uri.parse(url)); 
 startActivity(CustomTabsIntent.setAlwaysUseBrowserUI(intent));
  35. 109.

    Summary • Almost cannot URL handling… • UI can be

    updated use Remote View • It will be continuous development in the future