No content

Rahul Rout 28th September 2016 @routbuzz 

3 

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 

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 Instant Loading Add to Home Screen Push Notifications Fast Secure Responsive 

8 

9 

This is the time when you‟re giving your user a feedback that something is happening 10 

11 Is your App available • Paints of above the full content • Headline text • Something that a user can find useful 

12 Is the App actually usable 

If the user starts tapping on the page something usable is going to happen 13 Is the App actually usable 

14 

• 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 

• Powerful for offline usage (caching) • Also offers significant wins in other forms – Instant loading apps on repeated views 16 

17 

• Service Workers gives us the opportunity to start thinking about our application architecture 18 

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 • Responsive • Add to home screen • Application Shell • Content Caching 

21 • Responsive • Add to home screen • Application Shell • Content Caching 

22 • Responsive • Add to home screen • Application Shell • Content Caching 

23 • Responsive • Add to home screen • Application Shell • Content Caching 

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 

• 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 

• 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 

• 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 @routbuzz