加速するフロントエンドとPWA

at DevSumi 2018

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