5 minutes PWA

Transcript

1. 5 minuts PWA
2. PWAͱ͸ • Progressive Web Apps • ϞόΠϧ୺຤ͰϖʔδΛදࣔ͢Δͱ͖ʹωΠςΟϒΞϓϦͷ Α͏ͳڍಈΛͤ͞Δ͜ͱ͕Ͱ͖Δ • GoogleΛத৺ͱͯ͠ࡦఆ͞Ε͍ͯΔ
3. PWAΛߏ੒͢Δཁૉ • Service Worker • Push API • Notification API • localStorage / IndexedDB • History API • Geolocation API
4. PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯରԠ • ϖʔδͷදࣔ • ը໘ભҠ • ϓογϡ௨஌ • ϗʔϜը໘ͷ௥Ճ • Ґஔ৘ใͷऔಘ
5. PWA vs Native
7. ࠾༻ྫ • Twitter Mobile • Instagram • ଞଟ਺
8. Service Worker • ϒϥ΢β͕Webϖʔδͱ͸ผʹόοΫάϥ΢ϯυͰ࣮ߦ͢Δ εΫϦϓτɻ • DOMʹ͸௚઀ΞΫηεͰ͖ͳ͍ɻ • Service Worker͸࢖༻͍ͯ͠ͳ͍ؒ͸ऴྃ͞Εɺඞཁʹͳͬ ͨΒىಈ͠·͢ɻ • localhost or httpsͰͷΈಈ࡞ɻ
9. Service Worker
10. ϒϥ΢βରԠঢ়گ
11. iOS11.3ΑΓService Worker͕༗ޮ ʹ
12. ݁࿦
13. ͙͢ಋೖ͢΂͖͔ʁ
14. ·ͩૣ͍
15. Ҏ্
16. ࢀߟϦϯΫ • http://www.publickey1.jp/blog/18/ appleiosmacosprogressiveweb_apps.html • https://qiita.com/edwardkenfox/items/ 4c0b9550ffa48c1f0445 • https://qiita.com/y_fujieda/items/f9e765ac9d89ba241154 • https://developers.google.com/web/fundamentals/primers/ service-workers/?hl=ja • https://qiita.com/horo/items/ff665e4a6613e7684f8f