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

Transcript

1. 1.

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

   /fuya.info/meguroes
2. 2.

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

   ιʔγϟϧήʔϜͷ αʔόʔαΠυΤϯδχΞ(rails) 2 meguro.es#3 https:/ /fuya.info/meguroes
3. 3.

   ࠓ೔͸ͳ͢͜ͱ • meguro.es#1Ͱ͸ͳͨ͠WebPUSHΛ౰ࣾ๭ϓϩμΫτʹ͔ͭ͏ ࣄʹͳͬͨ • ΋͏͙͢૊Έࠐ·ΕΔ༧ఆ • ʮ৮ͬͯΈͨʯ͔Βʮ࣮ࡍʹ࢖͏ʯ·Ͱʹௐ΂ͨ͜ͱͳͲ࿩͠ ·͢ 3

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

   Web PUSH(Chrome & GCM) • GCMΛબ୒ͨ͠ཧ༝ • GCMͷ࢖༻ྉ͕͔͔Βͳ͍ • େ൒ͷϢʔβ͕ChromeͰ͋Δ

   • Firefox͸είʔϓ͔Β֎ͨ͠ • ͬ͘͞ͱ࣮૷Ͱ͖ͦ͏ 4 meguro.es#3 https:/ /fuya.info/meguroes
5. 5.

   Web PUSH(Chrome & GCM)Ͱେมͳ ͜ͱ • ϖΠϩʔυΛૹΕͳ͍ • ΫϦοΫ཰Θ͔Βͳ͍ •

   ෳ਺୺຤ɺϩάΞ΢τͨ͠ΒͲ͏͢Δͷ͔ 5 meguro.es#3 https:/ /fuya.info/meguroes
6. 6.

   GCM ϝοηʔδΛऔಘͰ͖ͳ͍໰୊ • service worker͕pushΠϕϯτΛड͚औͬͨΒɺαʔόʹϝοη ʔδΛ໰͍߹ΘͤΔ • XHR͸࢖͑ͳ͍ͷͰfetchΛ࢖͏ɻ 6 meguro.es#3

   https:/ /fuya.info/meguroes
7. 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. 8.

   PUSH௨஌ঝೝͨ͠ਓͱϩάΠϯͨ͠ ਓ͕͍ͬ͠ΐ͔Θ͔Βͳ͍໰୊ • cookieΛ͚ͭͯΞΫηε • αʔόଆͰؤுΕ͹ͳΜͱ͔ͳΓͦ͏ • ͨͩ͠ෳ਺୺຤ରԠ͸݁ߏ໘౗ͦ͏ fetch("/api/fetch_message", {

   credentials: "include" }) 8 meguro.es#3 https:/ /fuya.info/meguroes
9. 9.

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

10. 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.

    ΍΍ڧ͍΍Γ͔ͨͰ͞·͟·ͳཁ๬ Λ࣮૷Ͱ͖Δͷ͕Θ͔ͬͨ • ! • େม͚ͩͬͨͲɺ࣮༻Ͱ͖ͦ͏ͳࣄ͕Θ͔ͬͨɻ 11 meguro.es#3 https:/ /fuya.info/meguroes

12. 12.

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

13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

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

    meguro.es#3 https:/ /fuya.info/meguroes
17. 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. 18.

    Chrome49 -> 50Ͱ࣮૷Λมߋ͢Δ෦ ෼(ΫϥΠΞϯταΠυ) • subscriptionͰαʔόʹૹ৴͢Δ΂͖΋ͷ͕૿͑Δ • endpointʹՃ͑ͯp256dh,auth (ϒϥ΢βͷެ։伴ͱ͍ΘΏΔsalt) JSON.stringify(subscription)

    subscription.toJSON() Ͱ࣮ ૷͍ͯͨ͠Βಛʹมߋ͸ͳ͍ 18 meguro.es#3 https:/ /fuya.info/meguroes
19. 19.

    αʔόαΠυ • node.js (Googleͷ࣮૷ྫ) • https:/ /github.com/googlechrome/push-encryption-node • ruby (webpush

    gem) 19 meguro.es#3 https:/ /fuya.info/meguroes
20. 20.

    Notification Close Events • ௨஌Λดͨ࣌͡ʹΠϕϯτ͕ൃՐ • ෳ਺୺຤Ͱϝοηʔδͷطಡ೺Ѳ͕Ͱ͖Δ • ԡԼঢ়ଶ͕Θ͔Δɻ addEventListener('notificationclose',

    function(event){ }); 20 meguro.es#3 https:/ /fuya.info/meguroes
21. 21.

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

    /fuya.info/meguroes
22. 22.

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