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

More Decks by Radimir Bitsov

Other Decks in Technology


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

  2. @radibit

  3. @radibit Radimir Bitsov Front-end engineer who ❤ web performance, accessibility,

    and interface animation.
  4. @radibit @radibit GitHub · Twi er · CodePen

  5. @radibit A11y Meetup Berlin #3

  6. @radibit What is Progressive Web App?

  7. @radibit

  8. @radibit https://www

  9. @radibit https :// www

  10. “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
  11. “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
  12. @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
  13. @radibit PWA is secure

  14. @radibit PWA is responsive

  15. @radibit PWA is fresh

  16. @radibit Wait, Service Worker?

  17. @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
  18. @radibit No Service Worker Installing Service Worker lifecycle The Service

    Worker Lifecycle
  19. @radibit No Service Worker Installing Activated Error Service Worker lifecycle

    The Service Worker Lifecycle
  20. @radibit No Service Worker Installing Activated Error Idle Terminated Fetch

    / Message Service Worker lifecycle The Service Worker Lifecycle
  21. @radibit Service Worker resources

  22. @radibit Service Worker resources

  23. @radibit Service Worker resources

  24. @radibit PWA is offline first

  25. @radibit PWA is discoverable

  26. @radibit Wait, Web App Manifest?

  27. @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
  28. @radibit Tools ⚒

  29. @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/
  30. @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/
  31. 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.
  32. @radibit Why PWA?

  33. @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
  34. @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
  35. @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
  36. @radibit Quick and seamless installation process Progressive Web Apps: a

    love story
  37. 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.
  38. I’m betting on the Web as a platform and I’m

    all in ❤ How about you
  39. @radibit Thank you @radibit Slides: h p://bit.ly/2wmCreb