Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

whoami • ݹ୩จ໻ (Fumiya FURUYA) • גࣜձࣾυϦίϜ • ৽ଔ2೥໨ • ιʔγϟϧήʔϜͷ αʔόʔαΠυΤϯδχΞ(rails) 2 meguro.es#3 https:/ /fuya.info/meguroes

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Web PUSH(Chrome & GCM) • GCMΛબ୒ͨ͠ཧ༝ • GCMͷ࢖༻ྉ͕͔͔Βͳ͍ • େ൒ͷϢʔβ͕ChromeͰ͋Δ • Firefox͸είʔϓ͔Β֎ͨ͠ • ͬ͘͞ͱ࣮૷Ͱ͖ͦ͏ 4 meguro.es#3 https:/ /fuya.info/meguroes

Slide 5

Slide 5 text

Web PUSH(Chrome & GCM)Ͱେมͳ ͜ͱ • ϖΠϩʔυΛૹΕͳ͍ • ΫϦοΫ཰Θ͔Βͳ͍ • ෳ਺୺຤ɺϩάΞ΢τͨ͠ΒͲ͏͢Δͷ͔ 5 meguro.es#3 https:/ /fuya.info/meguroes

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

೚ҙͷϝοηʔδͷऔΓํ 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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

αʔόαΠυ • node.js (Googleͷ࣮૷ྫ) • https:/ /github.com/googlechrome/push-encryption-node • ruby (webpush gem) 19 meguro.es#3 https:/ /fuya.info/meguroes

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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