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

Transcript

1. 1.

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

2. 2.

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

   Vue.js
3. 3.

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

4. 4.

   1. ServiceWorkerͱ͸

5. 5.

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

6. 6.

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

7. 7.

   σϞ http://127.0.0.1:8889/

8. 8.

   2. PWAͱ͸

9. 9.

   Progressive Web Applications

10. 10.

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

11. 11.

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

12. 12.

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

13. 13.

    ༨ஊ

14. 14.

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

15. 15.

    None
16. 16.

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

17. 17.

    3ͭͷొ৔ਓ෺

18. 18.

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

19. 19.

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

20. 20.

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

21. 21.

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

22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

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

26. 26.

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

27. 27.

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

    ৽͍͠λΠϓͷαʔϏε
28. 28.

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

29. 29.

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

30. 30.

    4.2. ࠾༻ઓུ͕มΘΔ

31. 31.

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

32. 32.

    JavaScriptΤϯδχΞͷ धཁ⚽⚽

33. 33.

    ·ͱΊ

34. 34.

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

35. 35.

    ͋Γ͕ͱ͏͍͟͝·ͨ͠