Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Service Workers Push API Hands-on

infiniteloop 社内勉強会資料 2015/04/17

  • Als Erste(r) kommentieren

Service Workers Push API Hands-on

  1. 1. Service Workers
 PUSH API Hands-on 中川武憲
  2. 2. Supported by http://www.infiniteloop.co.jp/ 社内勉強会資料 2015/04/17
  3. 3. 自己紹介 中川武憲 @ww24 北海道科学大学 B4 IL アルバイト 4年目突入 来年から渋谷の緑色の会社勤務
  4. 4. Agenda ・Service Workers 概要  5~6min ・Service Workers 活用例   1min ・Hands-on      40~50min
  5. 5. Service Workers
  6. 6. Web Workers なら 聞いたことある
  7. 7. Web Workers ブラウザ上の JavaScript でマルチスレッドを扱 う仕組み。 フロント(UI スレッド)とは別にバックグラウン ドで処理を走らせることが可能。
  8. 8. ブラウザをフリーズさせない
  9. 9. Demo π = 4 × arctan1 を利用して π の値を求める。 http://dev.ww24.jp/javascript/PI/
  10. 10. 本題
  11. 11. Service Workers Web Workers はページを表示している間しか バックグラウンドで動かせない!
  12. 12. Service Workers Web Workers はページを開いている間しか 動かせない! Service Workers ならページを閉じていても 稼働する。
  13. 13. Service Workers で出来る事 ・Cache  ApplicationCache よりも高度なキャッシュ機能 ・Push  PUSH 通知 ・Sync  指定した任意のタイミングで起動 http://www.w3.org/TR/service-workers/
  14. 14. PUSH 通知 Chrome は 42 から対応
  15. 15. Web の PUSH 通知事情 今までも Notification API を使う事で、通知は可能。 WebSocket 等でリアルタイム通信を行い、 Notification API でネイティブのような通知を発行。
  16. 16. ただし、 ブラウザを開いている時だけ。
  17. 17. Service Workers PUSH API GCM Server Google Cloud Messaging (Chrome の場合) イベント通知 イベント通知 データ取得 イベ ン ト 通 知 スマホ等の
 ブラウザ ① ② ③
  18. 18. 昨日、Chrome 42 リリース! http://googlechromereleases.blogspot.jp/2015/04/stable-channel-update_14.html
  19. 19. http://googlechromereleases.blogspot.jp/2015/04/chrome-for-android-update.html Chrome for Android は数日中にリリース予定 本日、Chrome for Android 42 リリース!
  20. 20. PUSH API を実際に試そう! bit.ly/pdemo14
  21. 21. bit.ly/pdemo14
  22. 22. bit.ly/pdemo14
  23. 23. bit.ly/pdemo14
  24. 24. bit.ly/pdemo14
  25. 25. bit.ly/pdemo14
  26. 26. bit.ly/pdemo14
  27. 27. PUSH API 活用例
  28. 28. 突然ですが… 薬、飲み忘れませんか?
  29. 29. 僕はよく飲み忘れます。
  30. 30. Okusureminder お薬リマインダー お薬の飲み忘れ防止アプリ 薬を飲む時間になると、 PUSH API を利用してブラウザに通知。
  31. 31. ネイティブアプリにしない 理由 薬を常時服用しない為、習慣化していなくて 飲み忘れる人をターゲットとしたアプリ。 ↓ 薬が不要な時は使わない。 ↓ 毎日、毎週、毎月は使わない。
  32. 32. 使用頻度が低い
 ↓
 ネイティブアプリに するほどではない (使わない時は全く使わないし、使うときは頻繁に使う)
  33. 33. Demo. 進 🙅でした。 https://github.com/ww24/okusureminder
  34. 34. Hands-on
  35. 35. Google Cloud Messaging 参考: Google Cloud メッセージング(GCM)の使用 - Google Play デベロッパー ヘルプ https://support.google.com/googleplay/ android-developer/answer/2663268?hl=ja
  36. 36. https://console.developers.google.com/ ↑ Developer Console を開きます。 ※このスクリーンショットは古いので、現在の UI とは 異なっている箇所が何点かありますが、雰囲気は同じ なので察してください。
  37. 37. https://console.developers.google.com/
  38. 38. https://console.developers.google.com/ gcm_sender_id
  39. 39. https://console.developers.google.com/
  40. 40. 両方有効化する!
  41. 41. https://console.developers.google.com/
  42. 42. https://console.developers.google.com/
  43. 43. https://console.developers.google.com/
  44. 44. https://console.developers.google.com/ 0.0.0.0/0 を設定すると、全ての IP アドレスを許可
  45. 45. https://console.developers.google.com/ API Key
  46. 46. 準備終わり
  47. 47. Coding http://git.io/vvDyb
  48. 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. 49. Web Server Service Workers を試すには、 Web Server が 必要。 ホスト名が localhost の場合に限って HTTP Server でも使える。
 それ以外の場合は HTTPS Server が必要。
  50. 50. 簡単に HTTP Server を 用意する方法 $ python -m SimpleHTTPServer もしくは $ php -S localhost:8000
  51. 51. ブラウザで開く http://localhost:8000/
  52. 52. F12
 or
 Cmd + Alt + i Developer Tools を開く
  53. 53. コロン : の右側が subscription ID
  54. 54. Debug
  55. 55. Debug 新しいタブで開く chrome://serviceworker-internals/
  56. 56. Push Event を発火
  57. 57. 通知結果
  58. 58. 実際の 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) の場合 (入力する際に改行は不要です)
  59. 59. 参考資料 Ⅰ 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
  60. 60. 参考資料 Ⅱ 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

×