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

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