PWA少し

一年前くらいに社内で発表したものですが全公開のためPWA部分のみあげます

Transcript

1. PWA গ͠ ൧ా ਹ೭
2. ੲʹग़ͨ͠΍ͭ ެ։ͷͨΊʹ PWA෦෼ͷΈ ൈ͖ग़͠·ͨ͠
3. ͓͓͖ͳ΋ͷ΄Ͳ͓ͤΘʹͳ͖͕ͬͨ͢Δ͋Γ͕ͱ͏͍͟͝·͢
4. PWA
5. Progressive Web Apps
6. ֵ৽తͳ WebΞϓϦ ←༁ͤͳ͍
7. ֵ৽తͳ WebΞϓϦ ʁ
8. ֵ৽తͳ WebΞϓϦ ʂ ໎ͬͨΒ͜ΕʂΦεεϝΞϓϦ1બʂ
9. ωΠςΟϒΞϓϦɹ(ΞϓϦ) • ɹɹɹ΍ɹɹɹ͔Βμ΢ϯϩʔυͯ͠࢖͏ • ੈքʹެ։͢Δͷʹ৹͕͍ࠪΔ • ࠜఈ͸ Swift ΍ Kotlin ౳ͷOSʹΑΔݴޠ • ࣗ༝౓(ݖݶ)͕ߴ͍ ͦΕͰ҆શʹͳ͍ͬͯΔײ΋͋Δ Ұൠʹ ͱݺ͹ΕΔ δϟό Φϒγʔ
10. ωΠςΟϒΞϓϦ WebΞϓϦ
11. WebΞϓϦɹ(WebαΠτ) • Webϒϥ΢β͔ΒΞΫηεͯ͠࢖͏ • Πϯλʔωοτ͔ΒݟΕΕ͹ͦΕ͸΋͏ެ։ • ΈΜͳ͍͖ͩ͢ HTML, CSS, JavaScript • ࣗ༝౓(ݖݶ)͕௿͍ɹ(͍·͸) ΈΜͳͬͯ͠ΔΑͶ
12. WebΞϓϦ(ϒϥ΢β͔Β͔ͭ͏) ΋ ωΠςΟϒΞϓ(ΞϓϦΠϯετʔϧ͔ͯͭ͠͏) ΋ ͋ΔαʔϏε • TwitterɺFacebookɺInstagram • Googleܥ (Gmailͱ͔ • ΘΓͱ͋ͬͨͱ͍͏͔ɺ
 PCͰݟΕΔ΍ͭ͸͍͍ͩͨͦ͏ɻ ͳΜͷͨΊʹ͜ͷ͢Β͍Ͳ͔ͭͬͨ͘Θ͔ΒΜ
13. PWA • WebΞϓϦͰωΠςΟϒΞϓϦΈ͍ͨʹ
 ͍Ζ͍Ζͪ͠Ό͓͏ͥ • ΦϑϥΠϯಈ࡞ͱ͔PUSH௨஌ͱ͔ • ͸ॳ୅iPhoneͷ࣌ɺ
 ͦ͏͍͏ࢥ૝Ͱ͋ͬͨΒ͍͠ ॳ୅iPhoneग़ͨͱ͖͸AppStoreͳ͔ͬͨΒ͍͠ΜͰ͢Α δϣϒζ͕ݴͬͯͨ΋Μ δϣϒζ
14. PWA ͷΠϯετʔϧ • ϗʔϜը໘ʹ௥Ճ • ϒϥ΢β͔Βಠཱͨ͠
 ΞϓϦͱͯ͠ಈ͘ ଘࡏ͠ͳ͍ΫΠζɿͲ͕ͬͪPWAͰ͠ΐ͏
15. WebΞϓϦΏ͑ʹ अຐ अຐ IPhoneSE εΫϩʔϧʹΑͬͯग़ͨΓҾͬࠐΜͩΓ͸͠·͚͢Ͳ
16. ֤छ ΞϓϦ ϒϥ΢β PWA PWAରԠ͍ͯ͠ͳ͍αΠτ͸
 "ϗʔϜը໘ʹ௥Ճ"ͯ͠΋ϒϥ΢βͰͻΒ͔Ε·͢
17. WebΞϓϦΏ͑ʹʹ • WebαΠτͳͷͰΠϯλʔωοτ͕ͳ͍ͱ
 ݟΕͳ͘ͳΔ
18. ΩϟογϡɹͳΒPWA • εϚϗʹɺHTML, CSS, JS ͱ͔ը૾ͱ͔
 ΋Ζ΋Ζอଘͯ͠ஔ͚Δͱ͍͏͜ͱͰ͢ • εϚϗʹͪΐͬͱͨ͠৘ใΛจࣈྻͱͯ͠ஔ ͍͓ͯ͘͜ͱ͸JSͰ;ͭ͏ʹͰ͖·͢ • ͭ·ΓΦϑϥΠϯͰอ࣋͞Ε·͢
19. PWAʹͳΔʹ͸ • "https"Ͱެ։͞Ε͍ͯΔඞཁ • "manifest.json"ϑΝΠϧ • ςʔϚΧϥʔͱ͔ΞΠίϯͱ͔ͷઃఆ • "serviceWorker"Λ࢖ͬͯΠϯετʔϧ࣌౳ʹ ߦ͏ॲཧ΍Ωϟγϡͤ͞ΔϑΝΠϧΛࢦఆ
20. iPhoneɹͱɹAndroid • ࠓ͸iPhoneΑΓAndroidͷ΄͏͕ରԠ • Πϯετʔϧଅ͠όφʔΛϒϥ΢β͕ग़͢ • ͔ͦ͜ΒϫϯλοϓΠϯετʔϧ • PUSH௨஌ • Apple͸΍Δؾͳͦ͞͏ Apple Google Ωϟογϡͷѻ͍ํͳͲ΋
21. ϝϦοτ • Webٕज़͚ͩͰ͍͍ • ҰͭͷιʔεͰ͍Ζ͍ΖʹରԠ͢Ε͹ྑ͍ • Πϯετʔϧ͕؆୯
22. σϝϦοτ • ϗʔϜը໘ʹ௥Ճ͔ΒΞϓϦΈ͍ͨʹͳΔͱ ͍͏ଘࡏͷೝ஌ • ΞϓϦετΞʹฒ͹ͳ͍ • Appleͷ΍Δؾ͕ͳ͍
23. ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠