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

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

at DevSumi 2018

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

February 16, 2018
Tweet

Transcript

  1. Ճ଎͢ΔϑϩϯτΤϯυͱPWA @mizchi Developers Summit 2018

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

    ϑϦʔϥϯε • ϦΫϧʔτςΫϊϩδʔζ༷ • freeeגࣜձ༷ࣾ • etc...
  3. ʮReactͷਓʯ

  4. None
  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 Λ࢖ͬͯϞόΠϧΞϓϦͷମݧʹ௥͍ͭͨ͘ Ίͷʮ࣮૷ʯ

  17. None
  18. ϨΨγʔͷڥք • ServiceWorker ͕࣮૷͞Ε͍ͯΔ͔൱͔ • ϨΨγʔ = IE, Safari !

    • Ϟμϯ = ͦΕҎ֎
  19. None
  20. ServiceWorker ͱ͸ • όοΫάϥ΢ϯυͰಈ͘ϩʔΧϧϓϩΩγ • ͋ΒΏΔϨεϙϯεΛॻ͖׵͑Մೳ • HTML5 Application Cache

    ͷϦϒʔτ
  21. ஫ҙ!!!! ͔͜͜Βઌ͸ैདྷͷϦΫΤετ&ϨεϙϯεϞσϧͷৗ͕ࣝ௨༻͠ ·ͤΜ ઌೖ؍ΛऔΓআ͍͍ͯͩ͘͞

  22. None
  23. ServiceWorkerͷىಈ // client / SWىಈ navigator.serviceWorker.register('/sw.js', {scope: '/'}) // sw.js

    self.addEventListener('fetch', event => { // logging ͢Δ͚ͩ console.log(event.request.url); });
  24. None
  25. Service Worker Ͱग़དྷΔ͜ͱ • ͋ΒΏΔʢຊ౰ʹશͯͷ)Ϩεϙϯεͷಈతͳॻ͖׵͑ • ΦϑϥΠϯΩϟογϡ • όοΫάϥ΢ϯυॲཧ •

    ϓογϡ௨஌
  26. Service Worker Ͱग़དྷͳ͍͜ͱ • ৗறϓϩηε • Workerͷੜଘ࣌ؒ͸ϦΫΤετ։͔࢝Β15~30ඵఔ౓ • ϝϞϦ࢖༻ྔ΋੍ݶ •

    Web Budget API (΍΍͍͜͠ͷͰࠓճ͸ׂѪ)
  27. ʮWebͷৗࣝʯͷҰͭͷస׵఺ • αʔόʔʹ௚௨ => Ϩεϙϯε͸ಈతʹॻ͖׵ΘΔ • history.pushState ҎདྷͷϥΠϑαΠΫϧͷେ͖ͳมԽ(ޙ ड़)

  28. history.pushState

  29. None
  30. None
  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); }) ); });
  34. None
  35. Կ͕ى͍ͬͯ͜Δ͔ • Ұճ໨ͷϦΫΤετͰ͸ΩϟογϡΛஷΊΔ • ೋճ໨͔Β͸ΩϟογϡΛ࢖ͬͯىಈ • html,js,css Λʮαʔόʔʹ౸ୡ͢ΔલʹʯϓϩΩγग़དྷΔ

  36. None
  37. None
  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

  44. None
  45. dev.to ͷ࢓૊Έ • ॳճϦΫΤετΛ CDN Ͱ cache • ϦϯΫཁૉͷΦϯϚ΢εͰɺભҠઌΛࣄલʹ fetch

    & cache • ࣮ࡍͷϨεϙϯε͸SWͷCache͔Βฦ٫ ࢀߟ: https://dev.to/ben/making-devto-insanely- fast
  46. None
  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 ͱͷམͱ͠ॴ͕ඞཁ
  60. None
  61. PWAͷߴ଎ԽΛݟͭΊͳ͓͢

  62. ύϑΥʔϚϯενϡʔχϯάͱ͸ • ࢧ഑తͳϒϩοΩϯάཁૉΛ୳͢ • ௵͢ • ܁Γฦ͢ ʮਪଌ͢ΔͳɺܭଌͤΑʯ

  63. None
  64. ࢦඪͷऔΓํ • DevTools • Lighthouse • Puppeteer

  65. DevToolsͷ਺஋ΛಡΉ

  66. Lighthouse • Google ͷ ύϑΥʔϚϯεϝτϦΫεπʔϧ • ύϑΥʔϚϯε • SEO •

    ΞΫηγϏϦςΟ • PWA Support
  67. ͨͩߴ଎ͳΞϓϦΛ࡞Δ $ npm install -g preact-cli $ preact create simple

    myapp // deploy it
  68. None
  69. ڏແ͸଎͍ • ͲΜͳ΋ͷ΋࡞ͬͨͱ͖͸଎͍ • ͦΕΛҡ࣋͢Δͷ͸೉͍͠ • ʮॏ͞ʯͱ͸ʮػೳͷॏΈʯͰ͋Δ

  70. ͋ͳͨͷ΢ΣϒΛ஗͘͢Δ΋ͷ • ॏ͍SQL • ղ૾౓ͷߴ͍ը૾ • ޿ࠂʹΑΔϒϩοΩϯά • ୯ແཧղʹΑΔॳظԽύεͷෳࡶԽ

  71. ʮ଎౓ʯʹ΋͍Ζ͍Ζ͋Δ • ΠϯλϥΫγϣϯ: 16ms~ • ωοτϫʔΫ: 100ms~ • ϓϩτλΠϐϯά: 1ϲ݄~

    • ػೳ௥Ճ: 1िؒ~ • ϓϩμΫτͷϥΠϑαΠΫϧ: 1೥~ • ্৔: 3೥~
  72. ͋ͳͨʹඞཁͳʮ଎౓ʯ͸ͳΜͰ͢ ͔ʁ

  73. ͓ΘΓ