Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

about me • Shinya Sakemoto • JX Press Corp. • Kotlin • Swift

Slide 3

Slide 3 text

NewsDigest JX Press Corp. Link Stack sakebook

Slide 4

Slide 4 text

What’s Chrome Custom Tabs
 (CCT)

Slide 5

Slide 5 text

• How provide web experience without using WebView • Support Library 23.0.0~

Slide 6

Slide 6 text

• Requirement • Chrome installed device • Chrome version 45~ • API Level 16~

Slide 7

Slide 7 text

pros and cons

Slide 8

Slide 8 text

pros

Slide 9

Slide 9 text

• 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

Slide 10

Slide 10 text

pros

Slide 11

Slide 11 text

• Development related to WebView is unnecessary • INTERNET permission is also unnecessary • there is no need to consider OS version and device version.

Slide 12

Slide 12 text

cons

Slide 13

Slide 13 text

• There are many restrictions

Slide 14

Slide 14 text

• There are many restrictions

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Table of Contents(1/2) • Introduction of CCT • Chrome family • Sample code • Customize • Toolbar • Animation • Request • OAuth

Slide 17

Slide 17 text

Table of Contents(2/2) • Secondly Toolbar • Bottom Bar • Remote View • Warmup • Prefetch • Event • Session • CCT’s future

Slide 18

Slide 18 text

How to introduction

Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

Chrome family

Slide 21

Slide 21 text

• Chrome • Chrome bera • Chrome dev • Chrome canary

Slide 22

Slide 22 text

• 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

Slide 23

Slide 23 text

• Chrome : v • Chrome bera : v + 1 • Chrome dev : v + 2 • Chrome canary : v + 3

Slide 24

Slide 24 text

Official sample code

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

• 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

Slide 28

Slide 28 text

My sample code

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Customize Toolbar

Slide 33

Slide 33 text

• Pin or unpin the Toolbar • Default is unpin default

Slide 34

Slide 34 text

• Display the title • Default is not displayed default

Slide 35

Slide 35 text

• Select Toolbar color default

Slide 36

Slide 36 text

• Systembar color is set automatically according to Toolbar color default

Slide 37

Slide 37 text

• Icon will be white or black depending on Toolbar color default

Slide 38

Slide 38 text

• One action button • Default tinted default

Slide 39

Slide 39 text

• There can also change the close button • But there is no tint option default

Slide 40

Slide 40 text

• Up to five menu items can be added • Implement with
 PendingIntent default

Slide 41

Slide 41 text

• PendingIntent • Service, Broadcast, Activity can be used all. • I feel first Broadcast is slow

Slide 42

Slide 42 text

• Service

Slide 43

Slide 43 text

• Broadcast

Slide 44

Slide 44 text

• Activity

Slide 45

Slide 45 text

Who sets the URL?

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

• There can add the same share function as Chrome CCT Chrome

Slide 48

Slide 48 text

Customize animation

Slide 49

Slide 49 text

• anim/ • ActivityOptionsCompat#makeCust omAnimation

Slide 50

Slide 50 text

Customize request

Slide 51

Slide 51 text

• Add referrer default

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

• 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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

• Add custom header default

Slide 58

Slide 58 text

OAuth authorization

Slide 59

Slide 59 text

“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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Deprecated bottom bar

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

• CustomTabsIntent.Builder • addToolbarItem • It is still usable, but new features are not supported

Slide 75

Slide 75 text

Remote Views

Slide 76

Slide 76 text

Remote Views? • View that can be added on the CCT https://developer.android.com/reference/android/widget/RemoteViews.html

Slide 77

Slide 77 text

• Position is the bottom only • The default background is black(white). • Cannot transparent. ?android:attr/actionBarSize wrap_content

Slide 78

Slide 78 text

• Max height is 56dp • Only the background is drawn 200dp ?android:attr/actionBarSize

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Warmup

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

• warmup has return value • Return type: Boolean

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Prefetch

Slide 88

Slide 88 text

Prefetch? • Prefetch the WebContents • Prerender the WebContents

Slide 89

Slide 89 text

• mayLaunchUrl has return value • Return type: Boolean

Slide 90

Slide 90 text

• mayLaunchUrl True ≠ pre render completed • mayLaunchUrl mean pre render request started

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Receive event

Slide 93

Slide 93 text

• URL loading and tab state • URL currently not available yet • tab state is buggy 200dp

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Connect session

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

• Dynamic 
 UI change • Action Button • Remote Views

Slide 98

Slide 98 text

• Action Button • PendingIntent • update

Slide 99

Slide 99 text

• Remote Views • PendingIntent • update • show/hide

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

• A different URL can be inserted for the same Session • Not only web link. • However, triggers are user actions.

Slide 102

Slide 102 text

CCT’s future

Slide 103

Slide 103 text

• Remote View 
 behavior CCT(beta)

Slide 104

Slide 104 text

• Released chrome menu CCT CCT(beta)

Slide 105

Slide 105 text

• Instant Apps • I don’ t have a compatible device… • CustomTabsIntent.setInstantAppsE nabled

Slide 106

Slide 106 text

• Implicit intent is also opened in CCT • Chromium for Android

Slide 107

Slide 107 text

• 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));

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Summary • Almost cannot URL handling… • UI can be updated use Remote View • It will be continuous development in the future

Slide 110

Slide 110 text

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