Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5 minutes PWA

Tatsuya Arai
February 23, 2018

5 minutes PWA

Tatsuya Arai

February 23, 2018
Tweet

More Decks by Tatsuya Arai

Other Decks in Technology

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