Service Workers Push API Hands-on
•
10 gefällt mir•4,629 views
infiniteloop 社内勉強会資料 2015/04/17
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Service Workers Push API Hands-on
Ähnlich wie Service Workers Push API Hands-on (20)
Mehr von Takenori Nakagawa
Service Workers Push API Hands-on
- 1. Service Workers PUSH API Hands-on 中川武憲
- 3. 自己紹介 中川武憲 @ww24 北海道科学大学 B4 IL アルバイト 4年目突入 来年から渋谷の緑色の会社勤務
- 4. Agenda ・Service Workers 概要 5~6min ・Service Workers 活用例 1min ・Hands-on 40~50min
- 7. Web Workers ブラウザ上の JavaScript でマルチスレッドを扱 う仕組み。 フロント(UI スレッド)とは別にバックグラウン ドで処理を走らせることが可能。
- 9. Demo π = 4 × arctan1 を利用して π の値を求める。 http://dev.ww24.jp/javascript/PI/
- 10. 本題
- 11. Service Workers Web Workers はページを表示している間しか バックグラウンドで動かせない！
- 12. Service Workers Web Workers はページを開いている間しか 動かせない！ Service Workers ならページを閉じていても 稼働する。
- 13. Service Workers で出来る事 ・Cache ApplicationCache よりも高度なキャッシュ機能 ・Push PUSH 通知 ・Sync 指定した任意のタイミングで起動 http://www.w3.org/TR/service-workers/
- 14. PUSH 通知 Chrome は 42 から対応
- 15. Web の PUSH 通知事情 今までも Notification API を使う事で、通知は可能。 WebSocket 等でリアルタイム通信を行い、 Notification API でネイティブのような通知を発行。
- 17. Service Workers PUSH API GCM Server Google Cloud Messaging (Chrome の場合) イベント通知 イベント通知 データ取得 イベ ン ト 通 知 スマホ等の ブラウザ ① ② ③
- 18. 昨日、Chrome 42 リリース！ http://googlechromereleases.blogspot.jp/2015/04/stable-channel-update_14.html
- 19. http://googlechromereleases.blogspot.jp/2015/04/chrome-for-android-update.html Chrome for Android は数日中にリリース予定 本日、Chrome for Android 42 リリース！
- 21. bit.ly/pdemo14
- 22. bit.ly/pdemo14
- 23. bit.ly/pdemo14
- 24. bit.ly/pdemo14
- 25. bit.ly/pdemo14
- 26. bit.ly/pdemo14
- 27. PUSH API 活用例
- 29. 僕はよく飲み忘れます。
- 34. Hands-on
- 35. Google Cloud Messaging 参考: Google Cloud メッセージング（GCM）の使用 - Google Play デベロッパー ヘルプ https://support.google.com/googleplay/ android-developer/answer/2663268?hl=ja
- 36. https://console.developers.google.com/ ↑ Developer Console を開きます。 ※このスクリーンショットは古いので、現在の UI とは 異なっている箇所が何点かありますが、雰囲気は同じ なので察してください。
- 40. 両方有効化する！
- 46. 準備終わり
- 48. 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
- 49. Web Server Service Workers を試すには、 Web Server が 必要。 ホスト名が localhost の場合に限って HTTP Server でも使える。 それ以外の場合は HTTPS Server が必要。
- 50. 簡単に HTTP Server を 用意する方法 $ python -m SimpleHTTPServer もしくは $ php -S localhost:8000
- 52. F12 or Cmd + Alt + i Developer Tools を開く
- 55. コロン : の右側が subscription ID
- 56. Debug
- 59. Push Event を発火
- 61. 通知結果
- 62. 実際の 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) の場合 (入力する際に改行は不要です)
- 63. 参考資料 Ⅰ 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
- 64. 参考資料 Ⅱ 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