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

D7424ff0e1dc983d898de62c7496c321?s=47 uxindia
October 21, 2016

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.

D7424ff0e1dc983d898de62c7496c321?s=128

uxindia

October 21, 2016
Tweet

Transcript

  1. None
  2. Rahul Rout 28th September 2016 @routbuzz

  3. 3

  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
  5. 5

  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
  8. 8

  9. 9

  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
  14. 14

  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
  17. 17

  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