Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Service worker WebPUSH サービスでつかうよ!(meguro.es#3)

38b31e2f4877c8216969f152e4fb11d9?s=47 Fuya
April 19, 2016
380

Service worker WebPUSH サービスでつかうよ!(meguro.es#3)

38b31e2f4877c8216969f152e4fb11d9?s=128

Fuya

April 19, 2016
Tweet

Transcript

  1. Service worker WebPUSH αʔϏεͰ͔ͭ͏Αʂ meguro.es #3 2016/04/19 1 meguro.es#3 https:/

    /fuya.info/meguroes
  2. whoami • ݹ୩จ໻ (Fumiya FURUYA) • גࣜձࣾυϦίϜ • ৽ଔ2೥໨ •

    ιʔγϟϧήʔϜͷ αʔόʔαΠυΤϯδχΞ(rails) 2 meguro.es#3 https:/ /fuya.info/meguroes
  3. ࠓ೔͸ͳ͢͜ͱ • meguro.es#1Ͱ͸ͳͨ͠WebPUSHΛ౰ࣾ๭ϓϩμΫτʹ͔ͭ͏ ࣄʹͳͬͨ • ΋͏͙͢૊Έࠐ·ΕΔ༧ఆ • ʮ৮ͬͯΈͨʯ͔Βʮ࣮ࡍʹ࢖͏ʯ·Ͱʹௐ΂ͨ͜ͱͳͲ࿩͠ ·͢ 3

    meguro.es#3 https:/ /fuya.info/meguroes
  4. Web PUSH(Chrome & GCM) • GCMΛબ୒ͨ͠ཧ༝ • GCMͷ࢖༻ྉ͕͔͔Βͳ͍ • େ൒ͷϢʔβ͕ChromeͰ͋Δ

    • Firefox͸είʔϓ͔Β֎ͨ͠ • ͬ͘͞ͱ࣮૷Ͱ͖ͦ͏ 4 meguro.es#3 https:/ /fuya.info/meguroes
  5. Web PUSH(Chrome & GCM)Ͱେมͳ ͜ͱ • ϖΠϩʔυΛૹΕͳ͍ • ΫϦοΫ཰Θ͔Βͳ͍ •

    ෳ਺୺຤ɺϩάΞ΢τͨ͠ΒͲ͏͢Δͷ͔ 5 meguro.es#3 https:/ /fuya.info/meguroes
  6. GCM ϝοηʔδΛऔಘͰ͖ͳ͍໰୊ • service worker͕pushΠϕϯτΛड͚औͬͨΒɺαʔόʹϝοη ʔδΛ໰͍߹ΘͤΔ • XHR͸࢖͑ͳ͍ͷͰfetchΛ࢖͏ɻ 6 meguro.es#3

    https:/ /fuya.info/meguroes
  7. GCM ϝοηʔδΛऔಘͰ͖ͳ͍໰୊ self.addEventListener("push", function(event){ event.waitUntil( fetch("/api/fetch_message").then(function(res){ res.json().then(function(data){ self.registration.showNotification((data.title), { body:

    (data.message), icon: (data.icon) }); }); }) ) }); 7 meguro.es#3 https:/ /fuya.info/meguroes
  8. PUSH௨஌ঝೝͨ͠ਓͱϩάΠϯͨ͠ ਓ͕͍ͬ͠ΐ͔Θ͔Βͳ͍໰୊ • cookieΛ͚ͭͯΞΫηε • αʔόଆͰؤுΕ͹ͳΜͱ͔ͳΓͦ͏ • ͨͩ͠ෳ਺୺຤ରԠ͸݁ߏ໘౗ͦ͏ fetch("/api/fetch_message", {

    credentials: "include" }) 8 meguro.es#3 https:/ /fuya.info/meguroes
  9. ΫϦοΫ཰Θ͔Βͳ͍... • fetch͕དྷ͔ͨͲ͏͔Ͱ௨஌දࣔ਺ΛΧ΢ϯτ • URLΛ௨஌ϝοηʔδʹ͍ΕͯαʔόͰܭଌͰ͖Δ 9 meguro.es#3 https:/ /fuya.info/meguroes

  10. self.registration.showNotification((data.title), { body: (data.message), data: { link_url: data.link_url } });

    self.addEventListener('notificationclick', function(event) { clients.openWindow(event.data.link_url); }, false); 10 meguro.es#3 https:/ /fuya.info/meguroes
  11. ΍΍ڧ͍΍Γ͔ͨͰ͞·͟·ͳཁ๬ Λ࣮૷Ͱ͖Δͷ͕Θ͔ͬͨ • ! • େม͚ͩͬͨͲɺ࣮༻Ͱ͖ͦ͏ͳࣄ͕Θ͔ͬͨɻ 11 meguro.es#3 https:/ /fuya.info/meguroes

  12. 12 meguro.es#3 https:/ /fuya.info/meguroes

  13. 2016೥4݄ 13 meguro.es#3 https:/ /fuya.info/meguroes

  14. Chrome50 ʹͯ͜ΕΒͷ໰୊Λղܾʂ 14 meguro.es#3 https:/ /fuya.info/meguroes

  15. Chrome50 • Chrome50 ਺೔લϦϦʔε • ઌ΄Ͳ্͛ͨ໰୊Λ͍͔ͭ͘ղܾ 15 meguro.es#3 https:/ /fuya.info/meguroes

  16. ೚ҙͷϝοηʔδͷૹ৴ • subscription࣌ʹɺΫϥΠΞϯτ͕ެ։伴ɾൿີ伴ͷϖΞΛ࡞੒ • αʔόɺΫϥΠΞϯτͦΕͧΕͷ伴Λ͔ͭͬͯϝοηʔδ΍Γ ͱΓͰ͖Δ • Firefoxͱಉ͡ํࣜ ! 16

    meguro.es#3 https:/ /fuya.info/meguroes
  17. ೚ҙͷϝοηʔδͷऔΓํ self.addEventListener('push', function(event){ var data = event.data.json(); self.registration.showNotification((data.title), { body:

    data.message, }); }); 17 meguro.es#3 https:/ /fuya.info/meguroes
  18. Chrome49 -> 50Ͱ࣮૷Λมߋ͢Δ෦ ෼(ΫϥΠΞϯταΠυ) • subscriptionͰαʔόʹૹ৴͢Δ΂͖΋ͷ͕૿͑Δ • endpointʹՃ͑ͯp256dh,auth (ϒϥ΢βͷެ։伴ͱ͍ΘΏΔsalt) JSON.stringify(subscription)

    subscription.toJSON() Ͱ࣮ ૷͍ͯͨ͠Βಛʹมߋ͸ͳ͍ 18 meguro.es#3 https:/ /fuya.info/meguroes
  19. αʔόαΠυ • node.js (Googleͷ࣮૷ྫ) • https:/ /github.com/googlechrome/push-encryption-node • ruby (webpush

    gem) 19 meguro.es#3 https:/ /fuya.info/meguroes
  20. Notification Close Events • ௨஌Λดͨ࣌͡ʹΠϕϯτ͕ൃՐ • ෳ਺୺຤Ͱϝοηʔδͷطಡ೺Ѳ͕Ͱ͖Δ • ԡԼঢ়ଶ͕Θ͔Δɻ addEventListener('notificationclose',

    function(event){ }); 20 meguro.es#3 https:/ /fuya.info/meguroes
  21. ·ͱΊ • ͦΖͦΖWebPUSH΍ͬͯ΋ଛ͠ͳ͍͙Β͍ʹ͸ɺ؀ڥ͕ॆ࣮͠ ͖ͯͨ • ࢓༷͕૿͑ͯ΋େ࿮͸͔ΘΒͳ͍ͷͰॊೈʹ͏͚͝͹໰୊ͳ͞ ͦ͏ 21 meguro.es#3 https:/

    /fuya.info/meguroes
  22. DEMO (DEMO͸meguro.esͰ࣮ࢪ͠·ͨ͠) 22 meguro.es#3 https:/ /fuya.info/meguroes