Save 37% off PRO during our Black Friday Sale! »

これからのウェブの話をしよう – あるいは、ServiceWorkerとPWAで変わるフロントエンドとモバイル開発について

D32564792887e3fb5955021f9804c0a6?s=47 Edward Fox
February 23, 2018

これからのウェブの話をしよう – あるいは、ServiceWorkerとPWAで変わるフロントエンドとモバイル開発について

20180223 @社内LT会

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

February 23, 2018
Tweet

Transcript

  1. ͜Ε͔Βͷ΢Σϒͷ ࿩Λ͠Α͏ ͋Δ͍͸ɺServiceWorkerͱPWAͰมΘΔ ϑϩϯτΤϯυͱϞόΠϧ։ൃʹ͍ͭͯ Edward Fox 2018/02/23 @Repro Weekly MTG

  2. @edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾ୅ʑ໦ͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥ΢βٕज़શൠ, PWA,

    Vue.js
  3. TOC 1. ServiceWorkerͱ͸ 2. PWAͱ͸ 3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔ 4. ͜Ε͔ΒԿ͕ى͖Δͷ͔

  4. 1. ServiceWorkerͱ͸

  5. ϒϥ΢βͷUIεϨου͔Β ಠཱͯ͠ಈ͘ ϩʔΧϧϓϩΩγ

  6. ɾUIεϨου͔ΒͷωοτϫʔΫϦ ΫΤετΛϓϩΩγͰ͖Δ ɾlocalStorage΍IndexedDBͱ͸ผͷ ΩϟογϡετϨʔδΛར༻Մೳ ɾΩϟογϡ͔ΒϨεϙϯεΛ ฦͨ͠ΓɺϨεϙϯεΛվ᜵Ͱ͖Δ ɾΦϑϥΠϯ࣌΋ಈ࡞͢Δ

  7. σϞ http://127.0.0.1:8889/

  8. 2. PWAͱ͸

  9. Progressive Web Applications

  10. ServiceWorkerͳͲͷ ઌਐతͳϒϥ΢βAPIΛ࢖͍ ༏ΕͨϢʔβʔମݧΛ ఏڙ͢ΔΞϓϦέʔγϣϯ

  11. ※ ಛఆͷٕज़΍࢓༷ɺ ϑϨʔϜϫʔΫΛࢦ͢ ༻ޠͰ͸ͳ͍

  12. ɾΦϑϥΠϯରԠ ɾϓογϡ௨஌ ɾϗʔϜεΫϦʔϯʹ௥Ճ ͳͲϞόΠϧΞϓϦʹ͸ଘࡏ ͍ͯͨ͠UXΛ΢ΣϒͰ΋ ఏڙ͠Α͏ɺͱ͍͏ಈ͖

  13. ༨ஊ

  14. ΢Σϒϓογϡ ݏΘΕ͗͢໰୊

  15. None
  16. 3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔

  17. 3ͭͷొ৔ਓ෺

  18. ɾPWAΛਪਐ͢Δاۀ ɾαʔϏεఏڙऀ ɾΤϯυϢʔβʔ

  19. ͦΕͧΕͷϝϦοτΛ ݟͯΈΔ

  20. PWAΛਪਐ͢Δاۀͷࢹ఺ ɾ༏ΕͨϢʔβʔମݧ ɾΞϓϦˠ΢Σϒͷ༳Γ໭͠ => ΢Σϒ޿ࠂ૿ʁ

  21. αʔϏεఏڙऀͷࢹ఺ ɾࣗ༝ʹϦϦʔεͰ͖Δ => ϦδΣΫτʹΑΔڪා੓࣏ ͔Βͷ୤٫ => PDCAߴ଎Խ

  22. ※๭PWAԽ͞ΕͨαʔϏεͷ தͷਓ΋վળ΍hotfix͕ ͙͢ϦϦʔεͰ͖Δͷ͕ ΢ϚΈͱݴͬͯ·ͨ͠

  23. ΤϯυϢʔβʔͷࢹ఺ ɾUXʹมԽ͸ͳ͍ʢ͍·ͷͱ͜Ζʣ ɾΠϯετʔϧʗΞοϓσʔτ͕ෆ ཁʢ˺ΪΨઅ໿ʁʣ

  24. 4. ͜Ε͔ΒԿ͕ى͖Δͷ͔

  25. 4.1. ΢ΣϒͷਐԽͷૅͱͳΔ

  26. ServiceWorker + Gamepad API + WebAssembly => େن໛ϒϥ΢βήʔϜ ʢΦϑϥΠϯ΋ରԠʣ

  27. ServiceWorker + Geolocation API, navigator.bluetooth, navigator.getBattery() & etc. => ϞόΠϧΛओͱͨ͠

    ৽͍͠λΠϓͷαʔϏε
  28. Web Components ES Modules Payment Request API QUIC ͳͲͷ৽͍ٕ͠ज़ͱͷ γφδʔ

  29. ϢʔβʔͷՄॲ෼࣌ؒΛ ϞόΠϧͷྖҬͷதͰ ͍͔ʹୣ͏͔͕େࣄͰ͋Γٕज़ ΍࣮૷͸ॏཁͰ͸ͳ͍ => ϞόΠϧΛओͱͨ͠ ΢ΣϒαʔϏε͕΍ΕΔ͜ͱ͕ ֨ஈʹ૿͑Δ

  30. 4.2. ࠾༻ઓུ͕มΘΔ

  31. ωΠςΟϒΞϓϦ ↓ ϋΠϒϦουΞϓϦ ↓ React Native ↓ PWA

  32. JavaScriptΤϯδχΞͷ धཁ⚽⚽

  33. ·ͱΊ

  34. ɾServiceWorker = ϩʔΧϧϓϩΩ γ ɾPWAͷԸܙ͸UXʹඇͣɺࣗ༝ͳϦ Ϧʔεʹͦ͋͜Γ ɾاۀͷ։ൃɾվળɾ࠾༻ઓུ͕ม ΘΔ ɾ΢Σϒ͕Ճ଎౓తʹਐԽ͢Δະདྷ

  35. ͋Γ͕ͱ͏͍͟͝·ͨ͠