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 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!