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

20180223 @社内LT会

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. 1. ServiceWorkerͱ͸
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 2. PWAͱ͸
   

   View Slide

9. Progressive
   Web
   Applications
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. ༨ஊ
    

    View Slide

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

    View Slide

15. View Slide

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

    View Slide

17. 3ͭͷొ৔ਓ෺
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. ServiceWorker
    + Geolocation API,
    navigator.bluetooth,
    navigator.getBattery() & etc.
    => ϞόΠϧΛओͱͨ͠
    ৽͍͠λΠϓͷαʔϏε
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide