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

20180223 @社内LT会

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. ΢Σϒϓογϡ ݏΘΕ͗͢໰୊
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. ͋Γ͕ͱ͏͍͟͝·ͨ͠