PWA - Fastrack to mobile experience

A brief look at the basics of a PWA

Transcript

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
4. PWA BASICS 4
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 & more.
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