5 minutes PWA

Transcript

1. 5 minuts PWA
   

   View Slide

2. PWAͱ͸
   • Progressive Web Apps
   • ϞόΠϧ୺຤ͰϖʔδΛදࣔ͢Δͱ͖ʹωΠςΟϒΞϓϦͷ
   Α͏ͳڍಈΛͤ͞Δ͜ͱ͕Ͱ͖Δ
   • GoogleΛத৺ͱͯ͠ࡦఆ͞Ε͍ͯΔ
   

   View Slide

3. PWAΛߏ੒͢Δཁૉ
   • Service Worker
   • Push API
   • Notification API
   • localStorage / IndexedDB
   • History API
   • Geolocation API
   

   View Slide

4. PWAͰͰ͖Δ͜ͱ
   • ΦϑϥΠϯରԠ
   • ϖʔδͷදࣔ
   • ը໘ભҠ
   • ϓογϡ௨஌
   • ϗʔϜը໘ͷ௥Ճ
   • Ґஔ৘ใͷऔಘ
   

   View Slide

5. PWA vs Native
   

   View Slide

6. View Slide

7. ࠾༻ྫ
   • Twitter Mobile
   • Instagram
   • ଞଟ਺
   

   View Slide

8. Service Worker
   • ϒϥ΢β͕Webϖʔδͱ͸ผʹόοΫάϥ΢ϯυͰ࣮ߦ͢Δ
   εΫϦϓτɻ
   • DOMʹ͸௚઀ΞΫηεͰ͖ͳ͍ɻ
   • Service Worker͸࢖༻͍ͯ͠ͳ͍ؒ͸ऴྃ͞Εɺඞཁʹͳͬ
   ͨΒىಈ͠·͢ɻ
   • localhost or httpsͰͷΈಈ࡞ɻ
   

   View Slide

9. Service Worker
   

   View Slide

10. ϒϥ΢βରԠঢ়گ
    

    View Slide

11. iOS11.3ΑΓService Worker͕༗ޮ
    ʹ
    

    View Slide

12. ݁࿦
    

    View Slide

13. ͙͢ಋೖ͢΂͖͔ʁ
    

    View Slide

14. ·ͩૣ͍
    

    View Slide

15. Ҏ্
    

    View Slide

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
    

    View Slide