Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make full use of Chrome Custom Tabs

sakebook
March 10, 2017

Make full use of Chrome Custom Tabs

Presentation about Chrome Custom Tabs in DroidKaigi 2017.

sakebook

March 10, 2017
Tweet

More Decks by sakebook

Other Decks in Programming

Transcript

  1. Make full use of
 Chrome Custom Tabs DroidKaigi 2017 2017/3/10

    @sakebook
  2. about me • Shinya Sakemoto • JX Press Corp. •

    Kotlin • Swift
  3. NewsDigest JX Press Corp. Link Stack sakebook

  4. What’s Chrome Custom Tabs
 (CCT)

  5. • How provide web experience without using WebView • Support

    Library 23.0.0~
  6. • Requirement • Chrome installed device • Chrome version 45~

    • API Level 16~
  7. pros and cons

  8. pros

  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
  10. pros

  11. • Development related to WebView is unnecessary • INTERNET permission

    is also unnecessary • there is no need to consider OS version and device version.
  12. cons

  13. • There are many restrictions

  14. • There are many restrictions

  15. Presentation goal • To know what CCT can and can't

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

    • Sample code • Customize • Toolbar • Animation • Request • OAuth
  17. Table of Contents(2/2) • Secondly Toolbar • Bottom Bar •

    Remote View • Warmup • Prefetch • Event • Session • CCT’s future
  18. How to introduction

  19. app/build.gradle dependencies { 
 compile "com.android.support:customtabs:25.2.0"
 } 


  20. Chrome family

  21. • Chrome • Chrome bera • Chrome dev • Chrome

    canary
  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
  23. • Chrome : v • Chrome bera : v +

    1 • Chrome dev : v + 2 • Chrome canary : v + 3
  24. Official sample code

  25. GoogleChrome/custom- tabs-client https://github.com/GoogleChrome/custom-tabs-client

  26. GoogleChrome/custom- tabs-client https://github.com/GoogleChrome/custom-tabs-client

  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
  28. My sample code

  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
  30. CCT Sample https://play.google.com/store/apps/details? id=com.sakebook.android.sample.customtabssample

  31. None
  32. Customize Toolbar

  33. • Pin or unpin the Toolbar • Default is unpin

    default
  34. • Display the title • Default is not displayed default

  35. • Select Toolbar color default

  36. • Systembar color is set automatically according to Toolbar color

    default
  37. • Icon will be white or black depending on Toolbar

    color default
  38. • One action button • Default tinted default

  39. • There can also change the close button • But

    there is no tint option default
  40. • Up to five menu items can be added •

    Implement with
 PendingIntent default
  41. • PendingIntent • Service, Broadcast, Activity can be used all.

    • I feel first Broadcast is slow
  42. • Service

  43. • Broadcast

  44. • Activity

  45. Who sets the URL?

  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
  47. • There can add the same share function as Chrome

    CCT Chrome
  48. Customize animation

  49. • anim/ • ActivityOptionsCompat#makeCust omAnimation

  50. Customize request

  51. • Add referrer default

  52. • Document is wrong https://developer.chrome.com/multidevice/android/customtabs#add-your app as the referrer

  53. • Document is wrong customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
 Uri.parse("android-app://" + context.getPackageName()));
 customTabsIntent.launchUrl(context, Uri.parse(url));

    https://developer.chrome.com/multidevice/android/customtabs#add-your app as the referrer
  54. https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/IntentHandler.java#126 https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/IntentHandler.java#447 Only “android-app://” is permitted

  55. https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/IntentHandler.java#126 https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/IntentHandler.java#447 Only “android-app://” is permitted

  56. https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/IntentHandler.java#126 https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/IntentHandler.java#447 Only “android-app://” is permitted

  57. • Add custom header default

  58. OAuth authorization

  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
  60. https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08 IETF drafts

  61. • (1) Authz Request • Client App -> Browser https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08

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

    (2) Authz Request • Browser -> Endpoint https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
  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
  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
  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
  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
  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
  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
  69. None
  70. openid/AppAuth-Android https://github.com/openid/AppAuth-Android

  71. Deprecated bottom bar

  72. Added in 23.2 https://android-developers.googleblog.com/2016/02/android-support-library-232.html

  73. Deprecated in 24.0 https://android-developers.googleblog.com/2016/02/android-support-library-232.html

  74. • CustomTabsIntent.Builder • addToolbarItem • It is still usable, but

    new features are not supported
  75. Remote Views

  76. Remote Views? • View that can be added on the

    CCT https://developer.android.com/reference/android/widget/RemoteViews.html
  77. • Position is the bottom only • The default background

    is black(white). • Cannot transparent. ?android:attr/actionBarSize wrap_content
  78. • Max height is 56dp • Only the background is

    drawn 200dp ?android:attr/actionBarSize
  79. https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/customtabs/ CustomTabBottomBarDelegate.java#188 AddView to stub

  80. https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/res/values/dimens.xml#327 https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/res/layout/custom_tabs_bottombar.xml#11 56dp + 4dp shadow

  81. Warmup

  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
  83. • “warm up the browser and the native components.”

  84. • warmup has return value • Return type: Boolean

  85. https://chromium.googlesource.com/chromium/src.git/+/57.0.2987.88/chrome/android/ java/src/org/chromium/chrome/browser/customtabs/CustomTabsConnection.java#248 warmup True ≠ prepare completed

  86. warmup True ≠ prepare completed https://chromium.googlesource.com/chromium/src.git/+/57.0.2987.88/chrome/android/ java/src/org/chromium/chrome/browser/customtabs/CustomTabsConnection.java#248

  87. Prefetch

  88. Prefetch? • Prefetch the WebContents • Prerender the WebContents

  89. • mayLaunchUrl has return value • Return type: Boolean

  90. • mayLaunchUrl True ≠ pre render completed • mayLaunchUrl mean

    pre render request started
  91. An empty URL cancels the current prerender if any. https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/

    java/src/org/chromium/chrome/browser/customtabs/CustomTabsConnection.java#279
  92. Receive event

  93. • URL loading and tab state • URL currently not

    available yet • tab state is buggy 200dp
  94. Need callback and session https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/customtabs/CustomTabsConnection.java#670 https://chromium.googlesource.com/chromium/src.git/+/56.0.2924.87/chrome/android/ java/src/org/chromium/chrome/browser/customtabs/ClientManager.java#267

  95. Connect session

  96. Session? • One tab, one session • App <-> (Session)

    <-> CCT
  97. • Dynamic 
 UI change • Action Button • Remote

    Views
  98. • Action Button • PendingIntent • update

  99. • Remote Views • PendingIntent • update • show/hide

  100. • Remote Views • Can not redisplay if RemoteView is

    null.
  101. • A different URL can be inserted for the same

    Session • Not only web link. • However, triggers are user actions.
  102. CCT’s future

  103. • Remote View 
 behavior CCT(beta)

  104. • Released chrome menu CCT CCT(beta)

  105. • Instant Apps • I don’ t have a compatible

    device… • CustomTabsIntent.setInstantAppsE nabled
  106. • Implicit intent is also opened in CCT • Chromium

    for Android
  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));
  108. https://chromium.googlesource.com/chromium/src.git/+log/master/chrome/android/ java/src/org/chromium/chrome/browser/customtabs Incognito tab

  109. Summary • Almost cannot URL handling… • UI can be

    updated use Remote View • It will be continuous development in the future
  110. Thanks you! https://play.google.com/store/apps/details? id=com.sakebook.android.sample.customtabssample https://github.com/GoogleChrome/custom-tabs-client https://github.com/sakebook/CustomTabsSample https://chromium.googlesource.com/chromium/src.git/ https://developer.chrome.com/multidevice/android/customtabs https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native- apps.html

    https://android-developers.googleblog.com/2016/02/android-support-library-232.html