kyobashi.dex #2 http://kyobashi-android.connpass.com/event/23975/ ChromeとAndroidの過去・現在・未来 ver 0.1

1. ChromeとAndroidの
過去・現在・未来 ver 0.1
kyobashi.dex #2

2. About me
• Shinobu Okano(@operandoOS)
• Mercari, Inc.
• 変なものいっぱい作ってます
• https://github.com/operando

3. DroidKaigi 2016
• みんな来てね！
• https://droidkaigi.github.io/2016/

4. DroidKaigi 2016
• ２日間セッションします！
• Android Dev Tools Knowledge
• 2/18 14:00-14:50
• ChromeとAndroidの過去・現在・未来
• 2/19 16:30-17:00

5. shinobu.apk #1
• パネルディスカッション・一般参加募集中！
• http://shinobu-apk.connpass.com/event/
24921/

6. shinobu.apk #1
• Shinobu Okanoと愉快な仲間たちが繰り広げるファン
タジーな勉強会
• shibuya.apkという、渋谷を中心に活動するAndroidア
プリ開発者コミュニティの名前をtypoしたことによっ
て生まれたもの
• 真面目に言うと、有志を募ってAndroidについてパネ
ルディスカッションをする勉強会

7. 本題

8. ちなみに

9. 今日の発表DroidKaigiの
前フリだからね？

10. Chrome??
• Web Browser developed by Google
• Blink Rendering Engine
• V8 JavaScript Engine

11. Chromium??
• open-source browser project that aims to
build a safer, faster, and more stable way for
all Internet users to experience the web

12. Chromeの技術を活用したアプリ開発
• Chrome Custom Tabs
• Web App Manifest
• Service WorkersとWeb Push Notifications

13. Chromeの技術を活用したアプリ開発
• Chrome Custom Tabs
• Web App Manifest
• Service WorkersとWeb Push Notifications

14. Web App Manifest
• Webページに関連するメタデータを記述したjson
ファイルをサーバに置くことで、それらの情報を
Browserなど解釈し、Service Workerなどでプッ
シュ通知やHomeに追加が実現できる
• メタデータを記述したjsonファイル =
manifest.json

15. Web App Manifest
https://www.w3.org/TR/appmanifest/

16. Web App Manifest
• 雑に言うと、このWebページはこーゆーもんやで
• Homeに追加するならアイコンはこれ使ってくれ！
• Push使いたいで！
• アプリもあるから良かったらインストールして！
• みたいな感じ...

17. あれ？Webの話じゃね？
Android関係なくね？

18. Native app install banner
• Webにネイティブアプリのインストールバナーを
出すことができる
• ネイティブアプリ = Android Application
• 自身がリリースしたアプリ以外のインストールバナ
ーも出せる!
• support for Chrome 44

19. Native app install bannerを出す条件
• You have a web app manifest file
• short_nameと144x144のpng iconをtype image/
pngとして書いておく
• Your site is served over HTTPS
• The user has visited your site twice over two
separate days during the course of two weeks.

20. Native app install banner
• manifest.jsonに以下のような書いてあげる
{
"short_name": "Web Application Manifest Sample",
"name": "Web Application Manifest 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"
}
]
}

21. Native app install banner
https://github.com/operando/web-
application-manifest-sample
雑なサンプルはここ

22. Native app install banner
https://developers.google.com/web/updates/
2015/03/increasing-engagement-with-app-
install-banners-in-chrome-for-android
いいサンプル！最高なサンプル！

23. DEMO
Native app install banner
https://dl.dropboxusercontent.com/u/97368150/
index.html

24. Web Push Notifications
• WebからでもPush通知ができる
• Google Cloud Messaging(GCM)のプッシュ通知を
Webアプリで受け取ることができる
• Chrome for Androidでは、Chromeが起動してなくて
も通知を受信できる
• manifest.jsonにPush通知に必要な情報を記載する

25. Web Push Notifications Technology
• Service Worker
• https://www.w3.org/TR/service-workers/
• Push API
• https://w3c.github.io/push-api/
• Notifications API
• https://notifications.spec.whatwg.org/

26. manifest.json - Web Push Notifications
{
"short_name": "Web Application Manifest Sample",
"name": "Web Application Manifest Sample",
"icons": [
{
"src": "image/ic_android_black_48dp.png",
"sizes": "144x144",
"type": "image/png",
"density": 3.0
}
],
"start_url": "index.html",
"gcm_sender_id": "39129296837"
}

27. Web Push Notifications
https://github.com/operando/push-api-sample
雑なサンプルはここ

28. DEMO
Web Push Notifications
https://operando.github.io/push-api-sample/

29. App Stream
• 今調査中...
• に包まれてる
• http://www.itmedia.co.jp/news/articles/
1511/19/news074.html

30. Progressive Web Apps
• アプリっぽい快適に動作をするWeb App
• ....

31. 続きは、Droidkaigiで

32. Thanks!