Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

at DevSumi 2018

Koutarou Chikuba

February 16, 2018
Tweet

More Decks by Koutarou Chikuba

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • ஛അޫଠ࿠ / mizchi • node.js / ϑϩϯτΤϯυΤϯδχΞ •

    ϑϦʔϥϯε • ϦΫϧʔτςΫϊϩδʔζ༷ • freeeגࣜձ༷ࣾ • etc...
  2. ܦྺ • େֶ࣌୅: WebSocket Ͱ MMORPG ΛҰਓͰ࣮૷ • 2012~ ήʔϜܥ:

    HTML5 / Unity / Flash • 2013~ EdTechܥ: ڭࢣ޲͚ڭࡐΦʔαϦϯάπʔϧ • 2014~ Qiita: ϓϩάϥϚࢧԉπʔϧ • 2017~ ϑϦʔϥϯε
  3. ServiceWorkerͷىಈ // client / SWىಈ navigator.serviceWorker.register('/sw.js', {scope: '/'}) // sw.js

    self.addEventListener('fetch', event => { // logging ͢Δ͚ͩ console.log(event.request.url); });
  4. Offline Cache ͷίʔυྫ // sw.js self.addEventListener('fetch', event => { event.respondWith(

    caches.match(event.request).then(response => { return response || fetch(event.request); }) ); });
  5. ؔ࿈ٕज़: Web Packaging • ΢ΣϒϖʔδΛҰͭͷόΠφϦʹͯ͠഑෍͢Δٕज़ • ࢓༷: https://github.com/WICG/webpackage • AMP

    ΋ Web Packaging ରԠͰ࠶ߏங͞ΕΔํ޲ੑ • https://amphtml.wordpress.com/2018/01/09/ improving-urls-for-amp-pages/
  6. ΞϓϦέʔγϣϯԽ: ڝ߹͢Δٕज़ • Electron • PC൛ Chrome ͕ Add to

    homescreen ʹରԠ༧ఆ • React Native • Webٕज़ͷ Mobile App ։ൃ؀ڥͱ͍͏఺Ͱڝ߹
  7. dev.to ͷ࢓૊Έ • ॳճϦΫΤετΛ CDN Ͱ cache • ϦϯΫཁૉͷΦϯϚ΢εͰɺભҠઌΛࣄલʹ fetch

    & cache • ࣮ࡍͷϨεϙϯε͸SWͷCache͔Βฦ٫ ࢀߟ: https://dev.to/ben/making-devto-insanely- fast
  8. dev.to ͔Βֶ΂Δ͜ͱ • ଎͕͞࠷ॳ͔Βઃܭʹ૊Έࠐ·Ε͍ͯΔ • ϒϥ΢β͸ CDN ͱ OfflineCache ͔͠૬खΛ͠ͳ͍

    • ߋ৽࣌ͷ cache ͷഁغઓུΛ٧ΊΔ • ଎౓͸࠷ߴͷUX(͋Δ͍͸ͦͷ౔୆)
  9. IE໰୊: αϙʔτظݶ • Windows10 IE11: 2025/10/14 • Windows10 ʹ͸ Edge

    ౥ࡌࡁΈ • Edge Λ࢖͑ͱݴ͑ΔՄೳੑʁ • Windows7(8) IE11: 2020/01/14
  10. ໰୊: Push ͱ Apple • Safari TP11 ͷ SW ʹ

    onfetch ͸͋ͬͯ΋ onpush ͸ ͳ͍ • AppStore Notification Center ͱͷམͱ͠ॴ͕ඞཁ
  11. ʮ଎౓ʯʹ΋͍Ζ͍Ζ͋Δ • ΠϯλϥΫγϣϯ: 16ms~ • ωοτϫʔΫ: 100ms~ • ϓϩτλΠϐϯά: 1ϲ݄~

    • ػೳ௥Ճ: 1िؒ~ • ϓϩμΫτͷϥΠϑαΠΫϧ: 1೥~ • ্৔: 3೥~