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. “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
  2. “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
  3. @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
  4. @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
  5. @radibit No Service Worker Installing Activated Error Idle Terminated Fetch

    / Message Service Worker lifecycle The Service Worker Lifecycle
  6. @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
  7. @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/
  8. @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/
  9. 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.
  10. @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
  11. @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
  12. @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
  13. 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.