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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠