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

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. ͓ΘΓ