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

Progressive Web Apps – the universal benefits

Progressive Web Apps – the universal benefits

A short introduction into the essential aspects of Progressive Web Apps.

Radimir Bitsov

May 08, 2018
Tweet

More Decks by Radimir Bitsov

Other Decks in Technology

Transcript

  1. The universal benefits
    Radimir Bitsov @radibit
    Progressive Web
    Apps

    View full-size slide

  2. @radibit
    Radimir
    Bitsov
    Front-end engineer who ❤
    web performance, accessibility,
    and interface animation.

    View full-size slide

  3. @radibit
    @radibit
    GitHub · Twi er · CodePen

    View full-size slide

  4. @radibit
    A11y Meetup Berlin #3

    View full-size slide

  5. @radibit
    What is Progressive Web
    App?

    View full-size slide

  6. @radibit
    https://www

    View full-size slide

  7. @radibit
    https :// www

    View full-size slide

  8. “Progressive web apps use modern
    web APIs along with traditional
    progressive enhancement strategy
    to create cross-platform web
    applications.”
    h ps://developer.mozilla.org/en-US/Apps/Progressive

    View full-size slide

  9. “These apps work everywhere and
    provide several features that give
    them the same user experience
    advantages as native apps.”
    h ps://developer.mozilla.org/en-US/Apps/Progressive

    View full-size slide

  10. @radibit
    “These apps aren’t packaged and
    deployed through stores, they’re
    just websites that took all the right
    vitamins.”
    Alex Russell, 

    Senior Staff So ware Engineer,
    Google
    Progressive Web Apps: Escaping Tabs Without Losing
    Our Soul

    View full-size slide

  11. @radibit
    PWA is secure

    View full-size slide

  12. @radibit
    PWA is responsive


    View full-size slide

  13. @radibit
    PWA is fresh

    View full-size slide

  14. @radibit
    Wait, Service Worker?

    View full-size slide

  15. @radibit
    Service Worker
    A service worker is a script that your
    browser runs in the background,
    separate from a web page, opening the
    door to features that don't need a web
    page or user interaction like push
    notifications and background sync.
    Service Workers: an Introduction
    Application
    Service Worker
    Cache
    Network

    View full-size slide

  16. @radibit
    No Service Worker
    Installing
    Service Worker
    lifecycle
    The Service Worker Lifecycle

    View full-size slide

  17. @radibit
    No Service Worker
    Installing
    Activated Error
    Service Worker
    lifecycle
    The Service Worker Lifecycle

    View full-size slide

  18. @radibit
    No Service Worker
    Installing
    Activated Error
    Idle
    Terminated Fetch / Message
    Service Worker
    lifecycle
    The Service Worker Lifecycle

    View full-size slide

  19. @radibit
    Service Worker resources

    View full-size slide

  20. @radibit
    Service Worker resources

    View full-size slide

  21. @radibit
    Service Worker resources

    View full-size slide

  22. @radibit
    PWA is offline first

    View full-size slide

  23. @radibit
    PWA is discoverable

    View full-size slide

  24. @radibit
    Wait, Web App Manifest?

    View full-size slide

  25. @radibit
    Web App Manifest
    A JSON file that gives information
    about our app such as name, description,
    theme color, icons for the home screen,
    and a splash screen.
    Its purpose is to install web apps to the
    home screen of a device, providing users
    with quicker access and a richer
    experience.
    Web App Manifest

    View full-size slide

  26. @radibit
    Tools ⚒

    View full-size slide

  27. @radibit
    PWA Builder
    A tool that takes data form your site
    and uses that to generate cross-
    platform Progressive Web App.
    h ps://www.pwabuilder.com/

    View full-size slide

  28. @radibit
    Sonarwhal
    A tool that can analyze your website
    and generate a report which can help
    you to fix potential performance
    bo lenecks, accessibility and security
    issues.
    h ps://sonarwhal.com/

    View full-size slide

  29. If you’re building web apps with
    performance, accessibility, and
    security in mind using some of the
    modern web features, you’re already
    creating a PWA.

    View full-size slide

  30. @radibit
    Why PWA?

    View full-size slide

  31. @radibit
    comScore Mobile Metrix, U.S., Age 18+, June 2016
    Mobile web engagement
    A research on the top 1000 mobile apps vs. the top 1000 mobile web sites
    186.6
    9.3
    Average minutes per visitor
    Mobile Web
    Apps

    View full-size slide

  32. @radibit
    comScore Mobile Metrix, U.S., Age 18+, August 2017
    Mobile web is attracting larger audiences
    A research on the top 500 mobile apps vs. the top 500 mobile web sites
    7.0
    15.7
    Average monthly unique visitors (Million)
    Mobile Web
    Apps

    View full-size slide

  33. @radibit
    Pinterest PWA Performance Case Study
    Same experience, reduced download cost
    Comparing Pinterest PWA to the native apps
    9.6 MB
    56 MB
    Android
    150 KB
    iOS PWA

    View full-size slide

  34. @radibit
    Quick and seamless
    installation process
    Progressive Web Apps: a love story

    View full-size slide

  35. There is no bigger more popular
    platform than the Web.
    PWA combines the ease of access
    and reach of the Web, along the
    immersive experience of the native
    apps.

    View full-size slide

  36. I’m betting on the Web as a platform
    and I’m all in ❤
    How about you

    View full-size slide

  37. @radibit
    Thank you
    @radibit
    Slides: h p://bit.ly/2wmCreb

    View full-size slide