Service Workers Push API Hands-on

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

Transcript

1. Service Workers
 PUSH API Hands-on த઒෢ݑ
2. 4VQQPSUFE
   CZ 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 $ISPNF
    GPS
    "OESPJE
    ͸਺೔தʹϦϦʔε༧ఆ ຊ೔ɺ$ISPNF
    GPS
    "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 %FWFMPQFS
    5PPMT
    Λ։͘
55. ίϩϯ
    
    ͷӈଆ͕
    TVCTDSJQUJPO
    *%
56. Debug
57. Debug ৽͍͠λϒͰ։͘ chrome://serviceworker-internals/
59. 1VTI
    &WFOU
    ΛൃՐ
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