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

6. None

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