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
490
Service worker WebPUSH サービスでつかうよ!(meguro.es#3)
Fuya
April 19, 2016
Tweet
Share
More Decks by Fuya
See All by Fuya
Storybookを使って安心しながら開発を進める_ラクスルテレビCMオンラインストア開発
fuya
1
4k
meguro.esのサイトをPWAsにしてみた+α
fuya
0
730
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
75
5.2k
Clear Off the Table
cherdarchuk
85
310k
It's Worth the Effort
3n
180
27k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Happy Clients
brianwarren
92
6.4k
Building Effective Engineering Teams - LeadDev
addyosmani
31
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
The Cult of Friendly URLs
andyhume
74
5.7k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
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