Make full use of Chrome Custom Tabs

Presentation about Chrome Custom Tabs in DroidKaigi 2017.

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