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

Progressive Web Apps

Max Böck
September 22, 2017

Progressive Web Apps

An Introduction to PWA

Max Böck

September 22, 2017
Tweet

More Decks by Max Böck

Other Decks in Technology

Transcript

  1. Max Böck // @mxbck // mxb.at
    Progressive Web Apps

    View full-size slide

  2. Top 500 Apps vs. Top 500 Mobile Websites
    Source: comScore Mobile App Report, U.S., Age 18+, June 2017

    View full-size slide

  3. Advantages of PWAs
    ● Better Re-Engagement
    ● Discoverable (Open App Stores)
    ● Installable on Home Screen
    ● Better Search Ranking
    ● Connectivity Independent
    ● Platform Independent

    View full-size slide

  4. PWAs don’t have to be
    Applications”

    View full-size slide

  5. PWAs don’t have to be
    Single Page JS Apps

    View full-size slide

  6. PWAs are not a
    Google / Android thing

    View full-size slide

  7. Manifest File

    View full-size slide

  8. Manifest File
    HTTPS

    View full-size slide

  9. https://letsencrypt.org

    View full-size slide

  10. Manifest File
    HTTPS
    Service Worker

    View full-size slide

  11. Service Worker

    View full-size slide

  12. Offline
    Access
    Push
    Notifications
    Background
    Sync

    View full-size slide

  13. Service Worker Support
    shipped shipped shipped shipped
    currently in
    development
    currently in
    development
    Source: https://jakearchibald.github.io/isserviceworkerready, September 2017

    View full-size slide

  14. https://workboxjs.org

    View full-size slide

  15. Google Lighthouse

    View full-size slide

  16. Any web project can
    and should be a PWA.

    View full-size slide

  17. Thank you! Max Böck
    @mxbck
    https://mxb.at

    View full-size slide