Make full use of Chrome Custom Tabs

Transcript

1. 1.

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

   @sakebook
2. 2.

   about me • Shinya Sakemoto • JX Press Corp. •

   Kotlin • Swift
3. 3.

   NewsDigest JX Press Corp. Link Stack sakebook

4. 4.

   What’s Chrome Custom Tabs
 (CCT)

5. 5.

   • How provide web experience without using WebView • Support

   Library 23.0.0~
6. 6.

   • Requirement • Chrome installed device • Chrome version 45~

   • API Level 16~
7. 7.

   pros and cons

8. 8.

   pros

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

    pros

11. 11.

    • Development related to WebView is unnecessary • INTERNET permission

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

    cons

13. 13.

    • There are many restrictions

14. 14.

    • There are many restrictions

15. 15.

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

    do
16. 16.

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

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

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

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

    How to introduction

19. 19.

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


20. 20.

    Chrome family

21. 21.

    • Chrome • Chrome bera • Chrome dev • Chrome

    canary
22. 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. 23.

    • Chrome : v • Chrome bera : v +

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

    Official sample code

25. 25.

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

26. 26.

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

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

    My sample code

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

    CCT Sample https://play.google.com/store/apps/details? id=com.sakebook.android.sample.customtabssample

31. 31.

    None
32. 32.

    Customize Toolbar

33. 33.

    • Pin or unpin the Toolbar • Default is unpin

    default
34. 34.

    • Display the title • Default is not displayed default

35. 35.

    • Select Toolbar color default

36. 36.

    • Systembar color is set automatically according to Toolbar color

    default
37. 37.

    • Icon will be white or black depending on Toolbar

    color default
38. 38.

    • One action button • Default tinted default

39. 39.

    • There can also change the close button • But

    there is no tint option default
40. 40.

    • Up to five menu items can be added •

    Implement with
 PendingIntent default
41. 41.

    • PendingIntent • Service, Broadcast, Activity can be used all.

    • I feel first Broadcast is slow
42. 42.

    • Service

43. 43.

    • Broadcast

44. 44.

    • Activity

45. 45.

    Who sets the URL?

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

    • There can add the same share function as Chrome

    CCT Chrome
48. 48.

    Customize animation

49. 49.

    • anim/ • ActivityOptionsCompat#makeCust omAnimation

50. 50.

    Customize request

51. 51.

    • Add referrer default

52. 52.

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

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

    • Add custom header default

58. 58.

    OAuth authorization

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

    https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08 IETF drafts

61. 61.

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

62. 62.

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

    (2) Authz Request • Browser -> Endpoint https://tools.ietf.org/html/draft-ietf-oauth-native-apps-08
63. 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. 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. 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. 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. 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. 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. 69.

    None
70. 70.

    openid/AppAuth-Android https://github.com/openid/AppAuth-Android

71. 71.

    Deprecated bottom bar

72. 72.

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

73. 73.

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

74. 74.

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

    new features are not supported
75. 75.

    Remote Views

76. 76.

    Remote Views? • View that can be added on the

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

    • Position is the bottom only • The default background

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

    • Max height is 56dp • Only the background is

    drawn 200dp ?android:attr/actionBarSize
79. 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. 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. 81.

    Warmup

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

    • “warm up the browser and the native components.”

84. 84.

    • warmup has return value • Return type: Boolean

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

    Prefetch

88. 88.

    Prefetch? • Prefetch the WebContents • Prerender the WebContents

89. 89.

    • mayLaunchUrl has return value • Return type: Boolean

90. 90.

    • mayLaunchUrl True ≠ pre render completed • mayLaunchUrl mean

    pre render request started
91. 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. 92.

    Receive event

93. 93.

    • URL loading and tab state • URL currently not

    available yet • tab state is buggy 200dp
94. 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. 95.

    Connect session

96. 96.

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

    <-> CCT
97. 97.

    • Dynamic 
 UI change • Action Button • Remote

    Views
98. 98.

    • Action Button • PendingIntent • update

99. 99.

    • Remote Views • PendingIntent • update • show/hide

100. 100.

     • Remote Views • Can not redisplay if RemoteView is

     null.
101. 101.

     • A different URL can be inserted for the same

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

     CCT’s future

103. 103.

     • Remote View 
 behavior CCT(beta)

104. 104.

     • Released chrome menu CCT CCT(beta)

105. 105.

     • Instant Apps • I don’ t have a compatible

     device… • CustomTabsIntent.setInstantAppsE nabled
106. 106.

     • Implicit intent is also opened in CCT • Chromium

     for Android
107. 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. 108.

     https://chromium.googlesource.com/chromium/src.git/+log/master/chrome/android/ java/src/org/chromium/chrome/browser/customtabs Incognito tab

109. 109.

     Summary • Almost cannot URL handling… • UI can be

     updated use Remote View • It will be continuous development in the future
110. 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