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

PWA - Fastrack to mobile experience

PWA - Fastrack to mobile experience

A brief look at the basics of a PWA


Adrian Moya

November 20, 2018


  1. PWA Fastrack to a mobile experience

  2. Adrian E. Moya G. 2 Computer Engineer. Software Developer. Agile

    Trainer. ▪ http://adrianmoya.com ▪ adrianeduardo.moyaguzman@endava.com ▪ @adrianmoya
  3. Agenda 1. PWA basics a. What is a PWA b.

    Service Worker c. Manifest File 2. Angular PWA support 3

  5. WHAT IS A PWA? 5 Progressive Web Apps are user

    experiences that have the reach of the web, and are: Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience. This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.
  6. 6 RELIABLE Service Workers enable a Progressive Web App to

    load instantly, regardless of the network state.
  7. Service Workers A service worker, written in JavaScript, is like

    a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users. 7
  8. 8 FAST 53% of users will abandon a site if

    it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.
  9. 9 ENGAGING Installable and live on the user's home screen.

    Immersive full screen experience. Push notifications.
  10. The Manifest File The web app manifest is a simple

    JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt. 10
  11. Web Push Notifications 11 Demo at https://adrianmoya.github.io Built with OneSignal:

    a high volume and reliable push notification service for websites and mobile applications.
  12. ANGULAR PWA 12

  13. 13 Angular CLI Add manifest, configurable service worker, icons &

  14. Resources 14 PWA https://developers.google.com/web/progressive-web-apps/ Lighthouse: https://developers.google.com/web/tools/lighthouse/ Workbox: https://developers.google.com/web/tools/workbox/ Success: https://developers.google.com/web/showcase/

    Service Worker Support: https://jakearchibald.github.io/isserviceworkerready/index.html
  15. Thank you very much for your time 15 ▪ http://adrianmoya.com

    ▪ adrianeduardo.moyaguzman@endava.com ▪ @adrianmoya