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 Slide

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

    View Slide

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

    View Slide

  4. PWAs don’t have to be
    Applications”

    View Slide

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

    View Slide

  6. PWAs are not a
    Google / Android thing

    View Slide

  7. Manifest File

    View Slide

  8. View Slide

  9. View Slide

  10. Manifest File
    HTTPS

    View Slide

  11. https://letsencrypt.org

    View Slide

  12. Manifest File
    HTTPS
    Service Worker

    View Slide

  13. Service Worker

    View Slide

  14. View Slide

  15. Offline
    Access
    Push
    Notifications
    Background
    Sync

    View Slide

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

    View Slide

  17. https://workboxjs.org

    View Slide

  18. Google Lighthouse

    View Slide

  19. View Slide

  20. View Slide

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

    View Slide

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

    View Slide