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
500
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
740
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
What's new in Ruby 2.0
geeforr
338
31k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Designing with Data
zakiwarfel
96
5k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
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