Make full use of Chrome Custom Tabs

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