Slide 1
Slide 1 text
Ճ͢ΔϑϩϯτΤϯυͱPWA
@mizchi
Developers Summit 2018
Slide 2
Slide 2 text
ࣗݾհ
• അޫଠ / mizchi
• node.js / ϑϩϯτΤϯυΤϯδχΞ
• ϑϦʔϥϯε
• ϦΫϧʔτςΫϊϩδʔζ༷
• freeeגࣜձ༷ࣾ
• etc...
Slide 3
Slide 3 text
ʮReactͷਓʯ
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
ܦྺ
• େֶ࣌: WebSocket Ͱ MMORPG ΛҰਓͰ࣮
• 2012~ ήʔϜܥ: HTML5 / Unity / Flash
• 2013~ EdTechܥ: ڭࢣ͚ڭࡐΦʔαϦϯάπʔϧ
• 2014~ Qiita: ϓϩάϥϚࢧԉπʔϧ
• 2017~ ϑϦʔϥϯε
Slide 6
Slide 6 text
ࠓͷ༰
• PWAʹ͍ͭͯ
• ϑϩϯτΤϯυͷߴԽʹ͍ͭͯ
• ύϥμΠϜ͕ԿʹมΘΔ͔
Slide 7
Slide 7 text
͞ͳ͍͜ͱ
• ࣮ͷৄࡉ
• ࡉ͔͍༷
Slide 8
Slide 8 text
CAUTION!!! ࣗͷʹ͍ͭͯ
• ϑϩϯτΤϯυͱ͍͍ͭͭJSத৺ɺಛʹSPAภॏ
• ͍ΘΏΔʮWeb੍࡞ʯͱແԑ
• PWAͷղऍʹ͍ͭͯɺGoogleͱҧ͏ղऍΛ͍ͯ͠Δ͔
Slide 9
Slide 9 text
ࠓݺΕͨίϯςΩετ
Slide 10
Slide 10 text
dev.to ͱ͍͏αΠτ͕ੌ͍
• ւ֎ͷ qiita Έ͍ͨͳΣϒαΠτ
• ҟৗͳϨεϙϯε
• ҙ֎ͱγϯϓϧͳઃܭ
Slide 11
Slide 11 text
ʮͳͥ dev.to ͕ʙʯཁ
• ʮࠓʯͷύϑΥνϡͷৗࣝͰɺਅͬʹ࡞Δͱ͜Μͳʹ͍
• ͳ͕ͥࣗͰ͖ͳ͔ͬͨͷ͔ɺչ͍͠
• (ٕज़తͳৄࡉޙड़)
Slide 12
Slide 12 text
ࠃͷࣄྫ: https://r.nikkei.com
ܦిࢠ൛Λ͘͢Δ / nikkei-inside-frontend
Slide 13
Slide 13 text
PWAͱԿ͔
Slide 14
Slide 14 text
᷿ͷPWA
• Google ͷਪਐ͢Δ࣍ੈͷϑϩϯτΤϯυڥ
• ͿͬͪΌ͚ʮHTML5ʯ ͷϦϒϥϯσΟϯάײ
ΈΜͳຊʹཧղͯ͠·͔͢ʁʁʁ
Slide 15
Slide 15 text
ຊ࣭Λݟ·͠ΐ͏
Slide 16
Slide 16 text
ڱٛͷPWA
• ϞμϯͳϒϥβΛ͏ϢʔβʔʹɺΑΓྑ͍ମݧΛɺͱ͍
͏ʮํੑʯ
• ServiceWorker ΛͬͯϞόΠϧΞϓϦͷମݧʹ͍ͭͨ͘
Ίͷʮ࣮ʯ
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
ϨΨγʔͷڥք
• ServiceWorker ͕࣮͞Ε͍ͯΔ͔൱͔
• ϨΨγʔ = IE, Safari !
• Ϟμϯ = ͦΕҎ֎
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
ServiceWorker ͱ
• όοΫάϥϯυͰಈ͘ϩʔΧϧϓϩΩγ
• ͋ΒΏΔϨεϙϯεΛॻ͖͑Մೳ
• HTML5 Application Cache ͷϦϒʔτ
Slide 21
Slide 21 text
ҙ!!!!
͔͜͜ΒઌैདྷͷϦΫΤετ&ϨεϙϯεϞσϧͷৗ͕ࣝ௨༻͠
·ͤΜ
ઌೖ؍ΛऔΓআ͍͍ͯͩ͘͞
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
ServiceWorkerͷىಈ
// client / SWىಈ
navigator.serviceWorker.register('/sw.js', {scope: '/'})
// sw.js
self.addEventListener('fetch', event => {
// logging ͢Δ͚ͩ
console.log(event.request.url);
});
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Service Worker Ͱग़དྷΔ͜ͱ
• ͋ΒΏΔʢຊʹશͯͷ)Ϩεϙϯεͷಈతͳॻ͖͑
• ΦϑϥΠϯΩϟογϡ
• όοΫάϥϯυॲཧ
• ϓογϡ௨
Slide 26
Slide 26 text
Service Worker Ͱग़དྷͳ͍͜ͱ
• ৗறϓϩηε
• Workerͷੜଘ࣌ؒϦΫΤετ։͔࢝Β15~30ඵఔ
• ϝϞϦ༻ྔ੍ݶ
• Web Budget API (͍͜͠ͷͰࠓճׂѪ)
Slide 27
Slide 27 text
ʮWebͷৗࣝʯͷҰͭͷస
• αʔόʔʹ௨ => Ϩεϙϯεಈతʹॻ͖ΘΔ
• history.pushState ҎདྷͷϥΠϑαΠΫϧͷେ͖ͳมԽ(ޙ
ड़)
Slide 28
Slide 28 text
history.pushState
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
history.pushState Կ͔ͩͬͨ
• ಉҰυϝΠϯ෦ͰಈతʹURLΛॻ͖͑Δٕज़
• ಉҰϖʔδͷϥΠϑαΠΫϧͷԆ
• Single Page Application ͷجૅٕज़ͷҰͭ
Slide 32
Slide 32 text
PWA: ΦϑϥΠϯԽͷྫ
Slide 33
Slide 33 text
Offline Cache ͷίʔυྫ
// sw.js
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Կ͕ى͍ͬͯ͜Δ͔
• ҰճͷϦΫΤετͰΩϟογϡΛஷΊΔ
• ೋճ͔ΒΩϟογϡΛͬͯىಈ
• html,js,css Λʮαʔόʔʹ౸ୡ͢ΔલʹʯϓϩΩγग़དྷΔ
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
ΞϓϦέʔγϣϯͱͯ͠ͷPWA
• ΦϑϥΠϯΩϟογϡͰىಈ͠ɺαʔόʔʹґଘ͠ͳ͍ܗଶ
• ͍͔ͭ͘ͷڥͰΞϓϦͱͯ͠ొͰ͖Δ
• Android: Add to Homescreen
• Windows Store
Slide 39
Slide 39 text
࠷ۙͷχϡʔε
• ϚΠΫϩιϑτɺProgressive Web AppsʢPWAʣΛ
Windows 10ͷσεΫτοϓͰ࣮ߦՄೳʹɻWindows 10
WindowsɺLinuxɺPWAରԠͷϓϥοτϑΥʔϜ http://
www.publickey1.jp/blog/18/
progressivewebappspwawindows10windows10windowsl
inuxpwa.html
Slide 40
Slide 40 text
ؔ࿈ٕज़: Web Packaging
• ΣϒϖʔδΛҰͭͷόΠφϦʹͯ͢͠Δٕज़
• ༷: https://github.com/WICG/webpackage
• AMP Web Packaging ରԠͰ࠶ߏங͞ΕΔํੑ
• https://amphtml.wordpress.com/2018/01/09/
improving-urls-for-amp-pages/
Slide 41
Slide 41 text
ΞϓϦέʔγϣϯԽ: ڝ߹͢Δٕज़
• Electron
• PC൛ Chrome ͕ Add to homescreen ʹରԠ༧ఆ
• React Native
• Webٕज़ͷ Mobile App ։ൃڥͱ͍͏Ͱڝ߹
Slide 42
Slide 42 text
ͳͥΦϑϥΠϯԽ͕େࣄ͔
• Googleͷݴ͍: ·ͩΠϯλʔωοτ͕ශऑͳڥ͕ଟ͍
• ޫ͕͍ / ࠃ: 20ms~50ms, ΞϝϦΧ: 100ms~
• UXΛಥ͖٧ΊΔͨΊʹޫΛ͑Δ
Slide 43
Slide 43 text
࣮ྫ: dev.to
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
dev.to ͷΈ
• ॳճϦΫΤετΛ CDN Ͱ cache
• ϦϯΫཁૉͷΦϯϚεͰɺભҠઌΛࣄલʹ fetch & cache
• ࣮ࡍͷϨεϙϯεSWͷCache͔Βฦ٫
ࢀߟ: https://dev.to/ben/making-devto-insanely-
fast
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
dev.to ͔ΒֶΔ͜ͱ
• ͕͞࠷ॳ͔ΒઃܭʹΈࠐ·Ε͍ͯΔ
• ϒϥβ CDN ͱ OfflineCache ͔͠૬खΛ͠ͳ͍
• ߋ৽࣌ͷ cache ͷഁغઓུΛ٧ΊΔ
• ࠷ߴͷUX(͋Δ͍ͦͷ)
Slide 48
Slide 48 text
ServiceWorker: ಁաతͳߴԽ
• ͋͘·ͰطଘͷWebৼΔ͍ΛकΓͭͭߴԽ
• SWͷਅͷϙςϯγϟϧΛ׆͔͖͠ΔͷɺIE͕ࢮΜͩޙ
• ͋Δ͍։ൃऀπʔϧͳΒࠓ͙͢
Slide 49
Slide 49 text
PWAͱԿ͔: ·ͱΊ
• Service Worker ΛͷͨΊʹಁաతͳͱͯ͠͏
• IE͕ࢮ͵·Ͱͷ௨ա
• Push௨͏ͪΐͬͱޙ͔Ͷ
Slide 50
Slide 50 text
ݱ࣮
Slide 51
Slide 51 text
ຊʹ PWA ͷ͕࣌དྷΔͷ͔
• Mobile vs Web ͷཧઓ૪ͷؾ
• Internet Explorer !!!!!
• Push Notification
Slide 52
Slide 52 text
IE: αϙʔτظݶ
• Windows10 IE11: 2025/10/14
• Windows10 ʹ Edge ࡌࡁΈ
• Edge Λ͑ͱݴ͑ΔՄೳੑʁ
• Windows7(8) IE11: 2020/01/14
Slide 53
Slide 53 text
IE: ߈ུํ๏
• Mobile First Index
• ࠓޙϞόΠϧ൛ΣϒαΠτͰΫϩʔϥʹIndex͞ΕΔ
• ੈքతʹσεΫτοϓγΣΞԼؾຯ
=> ϞόΠϧΛλʔήοτʹ͢Δ = IEΛ͢ํศ
Slide 54
Slide 54 text
ʮPWAಁաతͳΩϟογϡʯ
• SWಡΈࠐΈલͰ
• SW͕ͳͯ͘
• SWಡΈࠐΈࡁΈͰ
ಉ͡ಈ͖Λ͢Δͣ
Slide 55
Slide 55 text
ݱʹ͍Ζ͍Ζͳཁٻ͕͋ΔͷͰ
அօ͞Μ͓·͔ͤ͠·͢
Slide 56
Slide 56 text
Push Notification
• ݱࡏਐߦܗͰେྔͷϔΠτΛങͬͯΔ
͜Ε
Slide 57
Slide 57 text
Push Notification ͷίʔυྫ
self.addEventListener('push', event => {
event.waitUntil(
self.registration.showNotification('λΠτϧ', {
body: 'ຊจ'
})
);
});
Slide 58
Slide 58 text
Push Notification
• pushͱpush notificationґଘ͢Δ͚Ͳҧ͏ͷ
• push௨ͷෆධͰόοΫάϥϯυॲཧ͕௵͞ΕΔͷ…
Slide 59
Slide 59 text
: Push ͱ Apple
• Safari TP11 ͷ SW ʹ onfetch ͋ͬͯ onpush
ͳ͍
• AppStore Notification Center ͱͷམͱ͠ॴ͕ඞཁ
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
PWAͷߴԽΛݟͭΊͳ͓͢
Slide 62
Slide 62 text
ύϑΥʔϚϯενϡʔχϯάͱ
• ࢧతͳϒϩοΩϯάཁૉΛ୳͢
• ௵͢
• ܁Γฦ͢
ʮਪଌ͢ΔͳɺܭଌͤΑʯ
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
ࢦඪͷऔΓํ
• DevTools
• Lighthouse
• Puppeteer
Slide 65
Slide 65 text
DevToolsͷΛಡΉ
Slide 66
Slide 66 text
Lighthouse
• Google ͷ ύϑΥʔϚϯεϝτϦΫεπʔϧ
• ύϑΥʔϚϯε
• SEO
• ΞΫηγϏϦςΟ
• PWA Support
Slide 67
Slide 67 text
ͨͩߴͳΞϓϦΛ࡞Δ
$ npm install -g preact-cli
$ preact create simple myapp
// deploy it
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
ڏແ͍
• ͲΜͳͷ࡞ͬͨͱ͖͍
• ͦΕΛҡ࣋͢Δͷ͍͠
• ʮॏ͞ʯͱʮػೳͷॏΈʯͰ͋Δ
Slide 70
Slide 70 text
͋ͳͨͷΣϒΛ͘͢Δͷ
• ॏ͍SQL
• ղ૾ͷߴ͍ը૾
• ࠂʹΑΔϒϩοΩϯά
• ୯ແཧղʹΑΔॳظԽύεͷෳࡶԽ
Slide 71
Slide 71 text
ʮʯʹ͍Ζ͍Ζ͋Δ
• ΠϯλϥΫγϣϯ: 16ms~
• ωοτϫʔΫ: 100ms~
• ϓϩτλΠϐϯά: 1ϲ݄~
• ػೳՃ: 1िؒ~
• ϓϩμΫτͷϥΠϑαΠΫϧ: 1~
• ্: 3~
Slide 72
Slide 72 text
͋ͳͨʹඞཁͳʮʯͳΜͰ͢
͔ʁ
Slide 73
Slide 73 text
͓ΘΓ