20180223 @社内LT会
͜Ε͔ΒͷΣϒͷΛ͠Α͏͋Δ͍ɺServiceWorkerͱPWAͰมΘΔϑϩϯτΤϯυͱϞόΠϧ։ൃʹ͍ͭͯEdward Fox 2018/02/23@Repro Weekly MTG
View Slide
@edwardkenfoxEdward FoxɾΤϯδχΞ@Reproגࣜձࣾɾʑͷํ͔Βདྷ·ͨ͠ɾRuby, JavaScript, AWSɾϒϥβٕज़શൠ, PWA, Vue.js
TOC1. ServiceWorkerͱ2. PWAͱ3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔4. ͜Ε͔ΒԿ͕ى͖Δͷ͔
1. ServiceWorkerͱ
ϒϥβͷUIεϨου͔Βಠཱͯ͠ಈ͘ϩʔΧϧϓϩΩγ
ɾUIεϨου͔ΒͷωοτϫʔΫϦΫΤετΛϓϩΩγͰ͖ΔɾlocalStorageIndexedDBͱผͷΩϟογϡετϨʔδΛར༻ՄೳɾΩϟογϡ͔ΒϨεϙϯεΛฦͨ͠ΓɺϨεϙϯεΛվ᜵Ͱ͖ΔɾΦϑϥΠϯ࣌ಈ࡞͢Δ
σϞhttp://127.0.0.1:8889/
2. PWAͱ
ProgressiveWebApplications
ServiceWorkerͳͲͷઌਐతͳϒϥβAPIΛ͍༏ΕͨϢʔβʔମݧΛఏڙ͢ΔΞϓϦέʔγϣϯ
※ ಛఆͷٕज़༷ɺϑϨʔϜϫʔΫΛࢦ͢༻ޠͰͳ͍
ɾΦϑϥΠϯରԠɾϓογϡ௨ɾϗʔϜεΫϦʔϯʹՃͳͲϞόΠϧΞϓϦʹଘࡏ͍ͯͨ͠UXΛΣϒͰఏڙ͠Α͏ɺͱ͍͏ಈ͖
༨ஊ
ΣϒϓογϡݏΘΕ͗͢
3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔
3ͭͷొਓ
ɾPWAΛਪਐ͢ΔاۀɾαʔϏεఏڙऀɾΤϯυϢʔβʔ
ͦΕͧΕͷϝϦοτΛݟͯΈΔ
PWAΛਪਐ͢Δاۀͷࢹɾ༏ΕͨϢʔβʔମݧɾΞϓϦˠΣϒͷ༳Γ͠=> Σϒࠂ૿ʁ
αʔϏεఏڙऀͷࢹɾࣗ༝ʹϦϦʔεͰ͖Δ=> ϦδΣΫτʹΑΔڪා࣏͔Βͷ٫=> PDCAߴԽ
※PWAԽ͞ΕͨαʔϏεͷதͷਓվળhotfix͕͙͢ϦϦʔεͰ͖Δͷ͕ϚΈͱݴͬͯ·ͨ͠
ΤϯυϢʔβʔͷࢹɾUXʹมԽͳ͍ʢ͍·ͷͱ͜ΖʣɾΠϯετʔϧʗΞοϓσʔτ͕ෆཁʢ˺ΪΨઅʁʣ
4. ͜Ε͔ΒԿ͕ى͖Δͷ͔
4.1.ΣϒͷਐԽͷૅͱͳΔ
ServiceWorker+ Gamepad API+ WebAssembly=> େنϒϥβήʔϜʢΦϑϥΠϯରԠʣ
ServiceWorker+ Geolocation API,navigator.bluetooth,navigator.getBattery() & etc.=> ϞόΠϧΛओͱͨ͠৽͍͠λΠϓͷαʔϏε
Web ComponentsES ModulesPayment Request APIQUICͳͲͷ৽͍ٕ͠ज़ͱͷγφδʔ
ϢʔβʔͷՄॲ࣌ؒΛϞόΠϧͷྖҬͷதͰ͍͔ʹୣ͏͔͕େࣄͰ͋Γٕज़࣮ॏཁͰͳ͍=> ϞόΠϧΛओͱͨ͠ΣϒαʔϏε͕ΕΔ͜ͱ͕֨ஈʹ૿͑Δ
4.2.࠾༻ઓུ͕มΘΔ
ωΠςΟϒΞϓϦ↓ϋΠϒϦουΞϓϦ↓React Native↓PWA
JavaScriptΤϯδχΞͷधཁ⚽⚽
·ͱΊ
ɾServiceWorker = ϩʔΧϧϓϩΩγɾPWAͷԸܙUXʹඇͣɺࣗ༝ͳϦϦʔεʹͦ͋͜Γɾاۀͷ։ൃɾվળɾ࠾༻ઓུ͕มΘΔɾΣϒ͕ՃతʹਐԽ͢Δະདྷ
͋Γ͕ͱ͏͍͟͝·ͨ͠