Service Workers Push API Hands-on

95c11fa7a33151f329b1841d6791eeb0?s=47 Take
April 17, 2015

Service Workers Push API Hands-on

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

95c11fa7a33151f329b1841d6791eeb0?s=128

Take

April 17, 2015
Tweet

Transcript

  1. Service Workers
 PUSH API Hands-on த઒෢ݑ

  2. 4VQQPSUFECZ IUUQXXXJOpOJUFMPPQDPKQ ࣾ಺ษڧձࢿྉɹ

  3. ࣗݾ঺հ த઒෢ݑɹ@ww24 ๺ւಓՊֶେֶ B4 IL ΞϧόΠτ 4೥໨ಥೖ དྷ೥͔Βौ୩ͷ྘৭ͷձࣾۈ຿

  4. Agenda ɾService Workers ֓ཁɹɹ5~6min ɾService Workers ׆༻ྫɹɹ 1min ɾHands-onɹɹɹɹɹɹ40~50min

  5. Service Workers

  6. Web Workers ͳΒ ฉ͍ͨ͜ͱ͋Δ

  7. Web Workers ϒϥ΢β্ͷ JavaScript ͰϚϧνεϨουΛѻ ͏࢓૊Έɻ ϑϩϯτ(UI εϨου)ͱ͸ผʹόοΫάϥ΢ϯ υͰॲཧΛ૸ΒͤΔ͜ͱ͕Մೳɻ

  8. ϒϥ΢βΛϑϦʔζͤ͞ͳ͍

  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

    ɹࢦఆͨ͠೚ҙͷλΠϛϯάͰىಈ IUUQXXXXPSH53TFSWJDFXPSLFST
  14. PUSH ௨஌ $ISPNF͸͔ΒରԠ

  15. Web ͷ PUSH ௨஌ࣄ৘ ࠓ·Ͱ΋ Notification API Λ࢖͏ࣄͰɺ௨஌͸Մೳɻ WebSocket ౳ͰϦΞϧλΠϜ௨৴Λߦ͍ɺ

    Notification API ͰωΠςΟϒͷΑ͏ͳ௨஌Λൃߦɻ
  16. ͨͩ͠ɺ ϒϥ΢βΛ։͍͍ͯΔ͚࣌ͩɻ

  17. Service Workers PUSH API ($. 4FSWFS (PPHMF$MPVE.FTTBHJOH $ISPNFͷ৔߹ Πϕϯτ௨஌ Πϕϯτ௨஌

    σʔλऔಘ Πϕ ϯ τ ௨ ஌ εϚϗ౳ͷ
 ϒϥ΢β ᶃ ᶄ ᶅ
  18. ࡢ೔ɺ$ISPNFϦϦʔεʂ IUUQHPPHMFDISPNFSFMFBTFTCMPHTQPUKQTUBCMFDIBOOFMVQEBUF@IUNM

  19. IUUQHPPHMFDISPNFSFMFBTFTCMPHTQPUKQDISPNFGPSBOESPJEVQEBUFIUNM $ISPNFGPS"OESPJE͸਺೔தʹϦϦʔε༧ఆ ຊ೔ɺ$ISPNFGPS"OESPJE ϦϦʔεʂ

  20. PUSH API Λ࣮ࡍʹࢼͦ͏ʂ CJUMZQEFNP

  21. CJUMZQEFNP

  22. CJUMZQEFNP

  23. CJUMZQEFNP

  24. CJUMZQEFNP

  25. CJUMZQEFNP

  26. CJUMZQEFNP

  27. PUSH API ׆༻ྫ

  28. ಥવͰ͕͢… ༀɺҿΈ๨Ε·ͤΜ͔ʁ

  29. ๻͸Α͘ҿΈ๨Ε·͢ɻ

  30. Okusureminder ͓ༀϦϚΠϯμʔ ͓ༀͷҿΈ๨Ε๷ࢭΞϓϦ ༀΛҿΉ࣌ؒʹͳΔͱɺ PUSH API Λར༻ͯ͠ϒϥ΢βʹ௨஌ɻ

  31. ωΠςΟϒΞϓϦʹ͠ͳ͍ ཧ༝ ༀΛৗ࣌෰༻͠ͳ͍ҝɺश׳Խ͍ͯ͠ͳͯ͘ ҿΈ๨ΕΔਓΛλʔήοτͱͨ͠ΞϓϦɻ ↓ ༀ͕ෆཁͳ࣌͸࢖Θͳ͍ɻ ↓ ຖ೔ɺຖिɺຖ݄͸࢖Θͳ͍ɻ

  32. ࢖༻ස౓͕௿͍
 ↓
 ωΠςΟϒΞϓϦʹ ͢Δ΄ͲͰ͸ͳ͍ ࢖Θͳ͍࣌͸શ͘࢖Θͳ͍͠ɺ࢖͏ͱ͖͸සൟʹ࢖͏

  33. Demo. ਐḿͰͨ͠ɻ https://github.com/ww24/okusureminder

  34. Hands-on

  35. Google Cloud Messaging ࢀߟ: Google Cloud ϝοηʔδϯάʢGCMʣͷ࢖༻ - Google Play

    σϕϩούʔ ϔϧϓ https://support.google.com/googleplay/ android-developer/answer/2663268?hl=ja
  36. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN ˢ%FWFMPQFS$POTPMFΛ։͖·͢ɻ ˞͜ͷεΫϦʔϯγϣοτ͸ݹ͍ͷͰɺݱࡏͷ6*ͱ͸ ҟͳ͍ͬͯΔՕॴ͕Կ఺͔͋Γ·͕͢ɺงғؾ͸ಉ͡ ͳͷͰ࡯͍ͯͩ͘͠͞ɻ

  37. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN

  38. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN HDN@TFOEFS@JE

  39. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN

  40. ྆ํ༗ޮԽ͢Δʂ

  41. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN

  42. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN

  43. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN

  44. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN Λઃఆ͢Δͱɺશͯͷ*1ΞυϨεΛڐՄ

  45. IUUQTDPOTPMFEFWFMPQFSTHPPHMFDPN "1*,FZ

  46. ४උऴΘΓ

  47. Coding IUUQHJUJPWW%ZC

  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 } HDN@TFOEFS@JE
  49. Web Server Service Workers Λࢼ͢ʹ͸ɺ Web Server ͕ ඞཁɻ ϗετ໊͕

    localhost ͷ৔߹ʹݶͬͯ HTTP Server Ͱ΋࢖͑Δɻ
 ͦΕҎ֎ͷ৔߹͸ HTTPS Server ͕ඞཁɻ
  50. ؆୯ʹ HTTP Server Λ ༻ҙ͢Δํ๏ $ python -m SimpleHTTPServer ΋͘͠͸

    $ php -S localhost:8000
  51. ϒϥ΢βͰ։͘ http://localhost:8000/

  52. '
 PS
 $NE "MU J %FWFMPQFS5PPMTΛ։͘

  53. None
  54. None
  55. ίϩϯͷӈଆ͕TVCTDSJQUJPO*%

  56. Debug

  57. Debug ৽͍͠λϒͰ։͘ chrome://serviceworker-internals/

  58. None
  59. 1VTI&WFOUΛൃՐ

  60. None
  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`"]}" .BD -JOVYͷ৔߹ 8JOEPXT 1PXFS4IFMM ͷ৔߹ ೖྗ͢Δࡍʹվߦ͸ෆཁͰ͢
  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