service workers push api hands-on
TRANSCRIPT
Service WorkersPUSH API Hands-on
中川武憲
自己紹介
中川武憲 @ww24
北海道科学大学 B4
IL アルバイト 4年目突入 来年から渋谷の緑色の会社勤務
Agenda
・Service Workers 概要 5~6min
・Service Workers 活用例 1min
・Hands-on 40~50min
Service Workers
Web Workers なら 聞いたことある
Web Workers
ブラウザ上の JavaScript でマルチスレッドを扱う仕組み。
フロント(UI スレッド)とは別にバックグラウンドで処理を走らせることが可能。
ブラウザをフリーズさせない
Demo
π = 4 × arctan1 を利用して π の値を求める。
http://dev.ww24.jp/javascript/PI/
本題
Service Workers
Web Workers はページを表示している間しかバックグラウンドで動かせない！
Service Workers
Web Workers はページを開いている間しか動かせない！
Service Workers ならページを閉じていても 稼働する。
Service Workers で出来る事
・Cache
ApplicationCache よりも高度なキャッシュ機能
・Push
PUSH 通知
・Sync 指定した任意のタイミングで起動
http://www.w3.org/TR/service-workers/
PUSH 通知Chrome は 42 から対応
Web の PUSH 通知事情
今までも Notification API を使う事で、通知は可能。
WebSocket 等でリアルタイム通信を行い、Notification API でネイティブのような通知を発行。
ただし、 ブラウザを開いている時だけ。
Service Workers PUSH API
GCM
Server
Google Cloud Messaging
(Chrome の場合)
イベント通知
イベント通知
データ取得イベント通知
スマホ等のブラウザ
①②
③
昨日、Chrom
e 42 リリース
！
http://googlechromereleases.blogspot.jp/2015/04/stable-channel-update_14.html
http://googlechromereleases.blogspot.jp/2015/04/chrome-for-android-update.html
Chrome for Android は数日中にリリース予定本日、
Chrome for
Android 42
リリース！
PUSH API 活用例
突然ですが… 薬、飲み忘れませんか？
僕はよく飲み忘れます。
Okusureminder お薬リマインダー
お薬の飲み忘れ防止アプリ
薬を飲む時間になると、
PUSH API を利用してブラウザに通知。
ネイティブアプリにしない 理由薬を常時服用しない為、習慣化していなくて飲み忘れる人をターゲットとしたアプリ。
↓ 薬が不要な時は使わない。
↓ 毎日、毎週、毎月は使わない。
使用頻度が低い↓
ネイティブアプリに するほどではない
(使わない時は全く使わないし、使うときは頻繁に使う)
Hands-on
Google Cloud Messaging
参考:
Google Cloud メッセージング（GCM）の使用
- Google Play デベロッパー ヘルプ
https://support.google.com/googleplay/android-developer/answer/2663268?hl=ja
https://console.developers.google.com/
↑ Developer Console を開きます。
※このスクリーンショットは古いので、現在の UI とは 異なっている箇所が何点かありますが、雰囲気は同じ なので察してください。
両方有効化する！
https://console.developers.google.com/
0.0.0.0/0 を設定すると、全ての IP アドレスを許可
準備終わり
manifest.json
{ "name": "push test", "short_name": "push!", "icons": [{ "src": "html5.png", "sizes": "64x64", "type": "image/png" }], "start_url": "/", "display": "standalone", "gcm_sender_id": "849903130382", "gcm_user_visible_only": true }
gcm_sender_id
Web Server
Service Workers を試すには、 Web Server が必要。 ホスト名が localhost の場合に限って HTTP
Server でも使える。
それ以外の場合は HTTPS Server が必要。
簡単に HTTP Server を 用意する方法
$ python -m SimpleHTTPServer もしくは $ php -S localhost:8000
F12or
Cmd + Alt + i
Developer Tools を開く
コロン : の右側が subscription ID
Debug
Push Event を発火
通知結果
実際の Push Event の発火方法
curl --header "Authorization: key=API_KEY" --header "Content-Type: application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"SUBSCRIPTION_ID\"]}"
Invoke-RestMethod -Headers @{Authorization="key=API_KEY"} -ContentType "application/json" -Uri "https://android.googleapis.com/gcm/send" -Method POST -Body "{`"registration_ids`":[`"SUBSCRIPTION_ID`"]}"
Mac, Linux の場合
Windows (PowerShell) の場合
(入力する際に改行は不要です)
参考資料 ⅠService Worker の紹介: Service Worker の使い方 - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/service-worker/introduction/
ServiceWorker API - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API
Push Notifications on the Open Web http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web
参考資料 ⅡIs ServiceWorker ready? (ブラウザの対応状況)
https://jakearchibald.github.io/isserviceworkerready/
W3C Working Draft http://www.w3.org/TR/service-workers/
GCM HTTP Connection Server | Android Developers https://developer.android.com/google/gcm/http.html
Chrome - Service Worker 開発するときのデバッグ方法 - Qiita
http://qiita.com/tmtysk/items/f77e31d6e9380e1c94a2