ChromeとAndroidの過去・現在・未来 ver 0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Native app install bannerを出す条件
• You have a web app manifest ﬁle
• 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.

• 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"
}
]
}

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

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

DEMO
https://dl.dropboxusercontent.com/u/97368150/
index.html

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

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/

manifest.json - Web Push Notiﬁcations
{
"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"
}

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

DEMO
https://operando.github.io/push-api-sample/

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

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

ChromeとAndroidの過去・現在・未来 ver 0.1

More Related Content

What's hot (20)

Viewers also liked (11)

More from Shinobu Okano (18)