This document provides an overview of Chrome and Android technologies from the past to the future. It discusses the evolution of WebView from WebKit to Chromium. It also covers Chrome Custom Tabs, which allows apps to use Chrome to display web content. Additionally, it mentions progressive web apps, service workers, app install banners, and streaming apps. The document promotes using new web technologies to provide native-like experiences within browsers.

1. ChromeとAndroidの
過去・現在・未来
Droidkaigi 2016

2. This is the last session
of DroidKaigi

3. Thank you for coming to
my session.

4. 最後まで楽しんでください！

5. About Me
Shinobu Okano
@operandoOS
Mercari, Inc.

7. shinobu.apk
http://hack-it-iron.hatenablog.com/entry/
2016/02/08/142322
shinobu.apk #1 のパネルディスカッション
録音データとShow Notesを公開しました！

8. まったりAndroid Framework Code Reading
http://hack-it-iron.hatenablog.com/entry/
2015/11/28/185529
まったりAndroid Framework
Code Reading #2 を開催しました

9. WebView

10. WebView
つ ら い

11. WebView
つ ら い

12. 1.x ∼ 4.3.x
WebKit
4.4.X
Chromium
5.0 ∼
System WebView
(APK)
WebView History

13. Google I/O 2012
Android WebView
https://www.youtube.com/watch?v=HbOtn5VhGZU

14. Migrating to WebView in
Android 4.4
http://developer.android.com/guide/webapps/migrating.html

15. Android System WebView
https://play.google.com/store/apps/details?
id=com.google.android.webview

16. Android WebView の進化と実装
http://outcesticide.hatenablog.com/entry/android_webview

17. Chrome Custom Tabs

18. Show the Chrome Tab
like a my app browser

19. Intent Chrome Custom Tabs

20. Chrome Custom Tabs

21. Intent
App Process Chrome Process
Chrome Custom Tabs

22. Setup Chrome Custom Tabs

23. Custom Tabs Support Library
Setup Chrome Custom Tabs
https://developer.android.com/tools/support-
library/features.html#custom-tabs

24. Setup Chrome Custom Tabs
https://github.com/GoogleChrome/custom-tabs-
client/tree/master/shared
Shared util module
(Optional)

25. Chrome Custom Tabs Starter Kit
Setup Chrome Custom Tabs
https://github.com/operando/chrome-custom-tabs-starterkit

26. dependencies {
compile 'com.android.support:customtabs:23.1.1'
compile project(':shared')
}
Setup Chrome Custom Tabs

27. Uri URI = Uri.parse("https://android.com/");
CustomTabsIntent tabsIntent = new CustomTabsIntent.Builder().build();
String package = CustomTabsHelper.getPackageNameToUse(this);
tabsIntent.intent.setPackage(package);
tabsIntent.launchUrl(this, URI);
Setup Chrome Custom Tabs

28. app to customize
how Chrome looks and feels

29. Toolbar color
Toolbar close button
Enter and exit animations
Add actions to the toolbar
Add overflow menu
UI customization

30. CustomTabsIntent tabsIntent = new CustomTabsIntent.Builder()
.setShowTitle(true)
.setToolbarColor(0x77C159)
.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right)
.setCloseButtonIcon(back)
.setActionButton(droid, "android", getActionButtonIntent())
.addMenuItem("android menu", getActionButtonIntent())
.build();
String package = CustomTabsHelper.getPackageNameToUse(this);
tabsIntent.intent.setPackage(package);
tabsIntent.launchUrl(this, Uri.parse("https://android.com/"));
UI customization

31. UI Customize

32. No Customize UI Customize

33. making the transition
from app to web content fast
and seamless

34. optimized to load faster than
WebViews and traditional
methods of launching Chrome

35. http://3.bp.blogspot.com/-bsqTJQg_KG8/VecqcRS1SnI/
AAAAAAAACAM/nclxZZ1bOxA/s1600/CCT_Large%2B2.gif

37. Warm up / Pre-fetch

38. Use Chrome features
Ssecurity
Saved passwords
Data Saver
Shared cookie
more features…

39. Chrome Custom Tabs
can replace the WebView?

40. NO!!!!!!!!!!

42. Why?

43. Why?
細かいHandlingができない
+ 秘伝のWebChromeClient
+ 秘伝のWebViewClient
+ JavaScriptInterface

44. Why?
細かいHandlingができない
+ 秘伝のWebChromeClient
+ 秘伝のWebViewClient
+ JavaScriptInterface

45. Why?
CustomTabsCallback#onNavigatio
nEventメソッドでページ(Tab)を
読み込み開始・終了、閉じた・開いた
くらいのことなら通知してくれる

46. Best Practices for Custom Tabs
https://medium.com/google-developers/best-practices-for-
custom-tabs-5700e55143ee

47. Android Intents with Chrome

48. Android Intents with Chrome
ChromeがIntent SyntacなURLを
解釈してIntentを実行する

49. Android Intents with Chrome
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="mercariapp"
android:host="run:" />
</intent-filter>

50. Android Intents with Chrome
<a href=
“intent://run/#Intent;
scheme=mercariapp;package=com.mercariapp.mercari;
end”>
Run Mercari
</a>

51. Android Intents with Chrome
https://developer.chrome.com/
multidevice/android/intents

52. Debugging WebViews

53. Debugging WebViews
webView.setWebContentsDebuggingEnabled(true);
Android 4.4 以上

54. Debugging WebViews

55. Debugging WebViews

56. Web App Manifest

57. Define the metadata
associated with
your web application in a
JSON-based manifest.

58. name
icons
display
theme_color
background_color
etc.
Manifest and its members

59. {
"name": "Google I/O 2015",
"short_name": "I/O 2015",
"display": "standalone",
"icons": [{
"src": "images/touch/homescreen144.png",
"sizes": "144x144",
"type": "image/png"
},…..],
"gcm_sender_id": "608394197750",
"gcm_user_visible_only": true
}
Manifest by Google IO 2015
https://events.google.com/io2015/manifest.json

60. <link rel="manifest" href="manifest.json">
Manifest by Google IO 2015
view-source:https://events.google.com/io2015/

61. manifest
HTTPS
Service Worker
visited your site twice over two
separate days during the course of
two weeks
App Install Banner

62. App Install Banner

63. Web Push Notification(GCM)
Cache API
Background Sync API
etc.
Service Worker

64. スマートフォン体験を一歩先へ
プログレッシブウェブアプリの作り方
https://docs.google.com/presentation/d/
1VcXsKDaCUpf2SS35WNcrKslkK6PcXxWsnhcKiLfWCXs/
edit#slide=id.gf39949af9_0_0
by Google Eiji Kitamura

65. ??

66. Web App Manifest
Ⅱ
Web Technology

67. but

68. Native app install banner

69. similar to Web app install banners,
but instead of adding to the home
screen will let the user install your
native app without leaving your
site
Native app install banner

70. You have a web app manifest file
Site is served over HTTPS
The user has visited your site twice
over two separate days during the
course of two weeks
Criteria to Show the Banner

71. chrome://flags/#bypass-app-banner-
engagement-checks
Testing flag

72. {
"name": "Native app install banner Sample",
"short_name": "Native app install banner Sample",
"icons": [{
"src": "image/ic_android_black_48dp.png",
"sizes": "144x144",
"type": "image/png"
}],
"prefer_related_applications": true,
"related_applications": [{
"platform": "play",
"id": "com.kouzoh.mercari"
}]
}
Native app install banner
manifest.json

73. Web App Manifest
https://www.w3.org/TR/appmanifest/
草案（Working Draft）

74. Native app Install Banners
https://developers.google.com/web/fundamentals/engage-
and-retain/app-install-banners/native-app-install

75. App Stream

76. when Google finds in-app
content that points to a
mobile app you don’t
already have installed, it will
offer you the option to
“stream” the app instead.

77. To run the application
in the streaming
when application
don’t have installed.

78. Streaming apps??

79. Very cool!!!!!!!!!!

80. http://3.bp.blogspot.com/-2Ats2zhc0HQ/Vkyq3JlcEiI/AAAAAAABBrA/hcfu4p02Fn4/
s1600/app-stream-w-dots.gif

81. “This uses a new cloud-based
technology that we’re
currently experimenting with”
http://insidesearch.blogspot.jp/2015/11/new-ways-to-find-and-
stream-app-content.html

82. VM
Streaming
Event(tap,scroll)
Streaming apps??

83. New ways to find (and stream)
app content in Google Search
http://insidesearch.blogspot.jp/2015/11/new-ways-to-find-and-
stream-app-content.html

84. Trial Run Ads

85. App ad format that lets a
user play a game for up to
60 seconds by streaming
content from the app before
downloading

86. http://2.bp.blogspot.com/-9v_0t2rKlzM/Vl-wzBxLs8I/AAAAAAAACGo/hU-Nndu-AIg/
s1600/Trial%2BRun%2BAd%2Bgif%2Bfor%2BSGN.gif

87. Introducing new interactive ads
to drive app installs
http://adwords.blogspot.jp/2015/12/trial-run-ads-interactive-
interstitials-beta.html

88. Chrome Platform Status
https://www.chromestatus.com/features

89. ChromeとAndroidの
今後について

90. Thanks!!
Enjoy After Party!!