Upload
shinobu-okano
View
1.359
Download
2
Embed Size (px)
Citation preview
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
• 2日間セッションします!
• 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 Notifications
Chromeの技術を活用したアプリ開発
• Chrome Custom Tabs
• Web App Manifest
• Service WorkersとWeb Push Notifications
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 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.
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" } ] }
Native app install banner
https://github.com/operando/web-application-manifest-sample
雑なサンプルはここ
Native app install banner
https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-
install-banners-in-chrome-for-android
いいサンプル!最高なサンプル!
DEMO Native app install banner
https://dl.dropboxusercontent.com/u/97368150/index.html
Web Push Notifications
• 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 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" }
Web Push Notifications
https://github.com/operando/push-api-sample
雑なサンプルはここ
DEMO Web Push Notifications
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
• ....
続きは、Droidkaigiで
Thanks!