Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Service worker WebPUSH サービスでつかうよ!(meguro.es#3)
Search
Fuya
April 19, 2016
0
540
Service worker WebPUSH サービスでつかうよ!(meguro.es#3)
Fuya
April 19, 2016
Tweet
Share
More Decks by Fuya
See All by Fuya
Storybookを使って安心しながら開発を進める_ラクスルテレビCMオンラインストア開発
fuya
1
4.2k
meguro.esのサイトをPWAsにしてみた+α
fuya
0
770
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Unsuck your backbone
ammeep
671
58k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
RailsConf 2023
tenderlove
30
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Gamification - CAS2011
davidbonilla
81
5.4k
Being A Developer After 40
akosma
90
590k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
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