PWA - Fastrack to mobile experience

Slide 1

Slide 1 text

PWA Fastrack to a mobile experience

Slide 2

Slide 2 text

Adrian E. Moya G. 2 Computer Engineer. Software Developer. Agile Trainer. ▪ http://adrianmoya.com ▪ [email protected] ▪ @adrianmoya

Slide 3

Slide 3 text

Agenda 1. PWA basics a. What is a PWA b. Service Worker c. Manifest File 2. Angular PWA support 3

Slide 4

Slide 4 text

PWA BASICS 4

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

6 RELIABLE Service Workers enable a Progressive Web App to load instantly, regardless of the network state.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

9 ENGAGING Installable and live on the user's home screen. Immersive full screen experience. Push notifications.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

ANGULAR PWA 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Thank you very much for your time 15 ▪ http://adrianmoya.com ▪ [email protected] ▪ @adrianmoya