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
550
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.3k
meguro.esのサイトをPWAsにしてみた+α
fuya
0
770
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Designing for humans not robots
tammielis
254
26k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Why Our Code Smells
bkeepers
PRO
339
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Unsuck your backbone
ammeep
671
58k
How to Ace a Technical Interview
jacobian
280
24k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Docker and Python
trallard
46
3.6k
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