Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Service worker WebPUSH サービスでつかうよ!(meguro.es#3)
Fuya
April 19, 2016
0
360
Service worker WebPUSH サービスでつかうよ!(meguro.es#3)
Fuya
April 19, 2016
Tweet
Share
More Decks by Fuya
See All by Fuya
fuya
1
3.4k
fuya
0
610
Featured
See All Featured
deanohume
295
27k
trishagee
20
2k
brettharned
93
3k
gr2m
83
11k
dougneiner
119
7.8k
hannesfritz
27
930
nonsquared
81
3.3k
62gerente
587
200k
destraynor
223
47k
smashingmag
283
47k
chrislema
231
16k
cherdarchuk
71
260k
Transcript
Service worker WebPUSH αʔϏεͰ͔ͭ͏Αʂ meguro.es #3 2016/04/19 1 meguro.es#3 https:/
/fuya.info/meguroes
whoami • ݹ୩จ (Fumiya FURUYA) • גࣜձࣾυϦίϜ • ৽ଔ2 •
ιʔγϟϧήʔϜͷ αʔόʔαΠυΤϯδχΞ(rails) 2 meguro.es#3 https:/ /fuya.info/meguroes
ࠓͳ͢͜ͱ • meguro.es#1Ͱͳͨ͠WebPUSHΛࣾϓϩμΫτʹ͔ͭ͏ ࣄʹͳͬͨ • ͏͙͢Έࠐ·ΕΔ༧ఆ • ʮ৮ͬͯΈͨʯ͔Βʮ࣮ࡍʹ͏ʯ·Ͱʹௐͨ͜ͱͳͲ͠ ·͢ 3
meguro.es#3 https:/ /fuya.info/meguroes
Web PUSH(Chrome & GCM) • GCMΛબͨ͠ཧ༝ • GCMͷ༻ྉ͕͔͔Βͳ͍ • େͷϢʔβ͕ChromeͰ͋Δ
• Firefoxείʔϓ͔Β֎ͨ͠ • ͬ͘͞ͱ࣮Ͱ͖ͦ͏ 4 meguro.es#3 https:/ /fuya.info/meguroes
Web PUSH(Chrome & GCM)Ͱେมͳ ͜ͱ • ϖΠϩʔυΛૹΕͳ͍ • ΫϦοΫΘ͔Βͳ͍ •
ෳɺϩάΞτͨ͠ΒͲ͏͢Δͷ͔ 5 meguro.es#3 https:/ /fuya.info/meguroes
GCM ϝοηʔδΛऔಘͰ͖ͳ͍ • service worker͕pushΠϕϯτΛड͚औͬͨΒɺαʔόʹϝοη ʔδΛ͍߹ΘͤΔ • XHR͑ͳ͍ͷͰfetchΛ͏ɻ 6 meguro.es#3
https:/ /fuya.info/meguroes
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
PUSH௨ঝೝͨ͠ਓͱϩάΠϯͨ͠ ਓ͕͍ͬ͠ΐ͔Θ͔Βͳ͍ • cookieΛ͚ͭͯΞΫηε • αʔόଆͰؤுΕͳΜͱ͔ͳΓͦ͏ • ͨͩ͠ෳରԠ݁ߏ໘ͦ͏ fetch("/api/fetch_message", {
credentials: "include" }) 8 meguro.es#3 https:/ /fuya.info/meguroes
ΫϦοΫΘ͔Βͳ͍... • fetch͕དྷ͔ͨͲ͏͔Ͱ௨දࣔΛΧϯτ • URLΛ௨ϝοηʔδʹ͍ΕͯαʔόͰܭଌͰ͖Δ 9 meguro.es#3 https:/ /fuya.info/meguroes
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 meguro.es#3 https:/ /fuya.info/meguroes
12 meguro.es#3 https:/ /fuya.info/meguroes
20164݄ 13 meguro.es#3 https:/ /fuya.info/meguroes
Chrome50 ʹͯ͜ΕΒͷΛղܾʂ 14 meguro.es#3 https:/ /fuya.info/meguroes
Chrome50 • Chrome50 લϦϦʔε • ઌ΄Ͳ্͛ͨΛ͍͔ͭ͘ղܾ 15 meguro.es#3 https:/ /fuya.info/meguroes
ҙͷϝοηʔδͷૹ৴ • subscription࣌ʹɺΫϥΠΞϯτ͕ެ։伴ɾൿີ伴ͷϖΞΛ࡞ • αʔόɺΫϥΠΞϯτͦΕͧΕͷ伴Λ͔ͭͬͯϝοηʔδΓ ͱΓͰ͖Δ • Firefoxͱಉ͡ํࣜ ! 16
meguro.es#3 https:/ /fuya.info/meguroes
ҙͷϝοηʔδͷऔΓํ 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
Chrome49 -> 50Ͱ࣮Λมߋ͢Δ෦ (ΫϥΠΞϯταΠυ) • subscriptionͰαʔόʹૹ৴͢Δ͖ͷ͕૿͑Δ • endpointʹՃ͑ͯp256dh,auth (ϒϥβͷެ։伴ͱ͍ΘΏΔsalt) JSON.stringify(subscription)
subscription.toJSON() Ͱ࣮ ͍ͯͨ͠Βಛʹมߋͳ͍ 18 meguro.es#3 https:/ /fuya.info/meguroes
αʔόαΠυ • node.js (Googleͷ࣮ྫ) • https:/ /github.com/googlechrome/push-encryption-node • ruby (webpush
gem) 19 meguro.es#3 https:/ /fuya.info/meguroes
Notification Close Events • ௨Λดͨ࣌͡ʹΠϕϯτ͕ൃՐ • ෳͰϝοηʔδͷطಡѲ͕Ͱ͖Δ • ԡԼঢ়ଶ͕Θ͔Δɻ addEventListener('notificationclose',
function(event){ }); 20 meguro.es#3 https:/ /fuya.info/meguroes
·ͱΊ • ͦΖͦΖWebPUSHͬͯଛ͠ͳ͍͙Β͍ʹɺڥ͕ॆ࣮͠ ͖ͯͨ • ༷͕૿͑ͯେ͔ΘΒͳ͍ͷͰॊೈʹ͏͚͝ͳ͞ ͦ͏ 21 meguro.es#3 https:/
/fuya.info/meguroes
DEMO (DEMOmeguro.esͰ࣮ࢪ͠·ͨ͠) 22 meguro.es#3 https:/ /fuya.info/meguroes