UXINDIA16- Progressive Web Applications - What to keep in mind ( Rahul Rout ) by uxindia

By now, you’ve probably heard that Progressive Web Apps are the future of all mankind. They’ll bring world peace, end hunger, save the rainbows and unicorns, bring balance to the force, and a whole lot more. In the process, they might even push the mobile web forward, bring parity to web and native apps, and help mobile developers reach more users beyond the confines of the app stores. – blog.ionic.io The talk is going to provide an overview of what Progressive Web Apps are, what features do they have and what are the aspects to keep in mind when designing a PWA. Finally show a couple of Demos of PWAs.

Transcript

2. Rahul Rout 28th September 2016 @routbuzz
4. They are going to • Be the future of mankind • Save the rainbows and unicorns • Bring balance to the “Force” And in the process • Push the mobile web forward • Bring parity to mobile web and native apps 4
6. 6 A web application using modern web technologies to deliver app like user- experience. They evolve from pages in browser tabs to top level items that are available on a user‟s home screen They exhibit reliable performance – Like a native app
7. 7 Instant Loading Add to Home Screen Push Notifications Fast Secure Responsive
10. This is the time when you‟re giving your user a feedback that something is happening 10
11. 11 Is your App available • Paints of above the full content • Headline text • Something that a user can find useful
12. 12 Is the App actually usable
13. If the user starts tapping on the page something usable is going to happen 13 Is the App actually usable
15. • Script that runs in the background • Separate from the web page • Responds to events, network request made by the page • Has an intentionally short life span 15
16. • Powerful for offline usage (caching) • Also offers significant wins in other forms – Instant loading apps on repeated views 16
18. • Service Workers gives us the opportunity to start thinking about our application architecture 18
19. Application Shell • Send the most necessary content down the network first – Toolbar – Drawer – Few Cards • Then dynamically populate the content with the rest of the data 19
20. 20 • Responsive • Add to home screen • Application Shell • Content Caching
21. 21 • Responsive • Add to home screen • Application Shell • Content Caching
22. 22 • Responsive • Add to home screen • Application Shell • Content Caching
23. 23 • Responsive • Add to home screen • Application Shell • Content Caching
24. 24 • Angular – 2 : Final release version on September 14th 2016 • Angular Mobile Toolkit let‟s you build PWA‟s with minimum code required • Automatic PWA‟s • One developer, many platforms
25. • Screen transitions shouldn‟t feel slow due to blocking on the network • Tappable areas should give touch feedback • Touching an element while scrolling shouldn‟t trigger touch feedback • Content shouldn‟t jump as the page loads • Buttons and „non-content‟ shouldn‟t be selectable • Provide an easy way to share content 25 *Credits : Owen Campbell Moore http://bit.ly/2dVAY3y
26. • Use system fonts • Avoid overly “web-like” design • Touch interactions should be implemented very well, or not at all 26 *Credits : Owen Campbell Moore http://bit.ly/2dVAY3y
27. • Addy Osmani‟s Talk in Google IO: https://goo.gl/Be5rEz • Developers.google.com: https://goo.gl/KdWhwv • Blog.ionic.com: http://blog.ionic.io/what-is-a-progressive-web-app/ 27
28. 28 @routbuzz