Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps For Startups

1,445 views

Published on

What are the ways that startups can leverage the benefits that progressive web apps allow these days?
In this talk, I covered some of the startups best practices and how entrepreneurs can take advantage from the capabilities that PWAs give them.

Published in: Technology

Progressive Web Apps For Startups

  1. 1. Proprietary + Confidential Progressive Web Apps For Startups Oct 2016
  2. 2. Proprietary + Confidential Ido Green @greenido ido-green.appspot.com
  3. 3. Proprietary + Confidential Progressive Web Apps Mobile has natively come to the Web So you can focus on your own magic!
  4. 4. Proprietary + Confidential Startups Best Practices
  5. 5. Team ● Resourceful ● Determination ● Hire when desperate
  6. 6. Hire HireTrueexperts (especiallyatthestart) Hiredueto urgentneed
  7. 7. Team - How? Employees should feel valued ● 1:1 meetings ● company meeting ● Fire fast
  8. 8. A great product “Your time should be spent on building the product and talking to customers. 50/50 is a good start.”
  9. 9. Product Better to build something that few users LOVE than something that a lot of users like
  10. 10. Product - Signals wordofmouth Needstopayforgrowth
  11. 11. Great(Simple)Products WIN
  12. 12. Product ● Get users manually ● Listen to outside users ● Build an engine: users -> feedback -> product improvement
  13. 13. Execution Everything will follow the founder. Do it yourself!
  14. 14. Get Things Done SayNo (often) Setbiggoals Talk & Listen
  15. 15. Execution You need growth and momentum ● Get new things. Fast. ● “Move fast and break things” ● Be obsess on quality ● Measure what moves the needle
  16. 16. Execution Doeverythingyoucan (andmore) Don’tgiveup
  17. 17. Keep the momentum ● Shipping new version every day/week ● New features ● Keep listen to your users ○ Actions ○ Metrics
  18. 18. The Big Bang of Computing g.co/ProgressiveWebApps
  19. 19. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
  20. 20. Ajax was born to run desktop apps on the Web
  21. 21. How did the Web beat native applications on the desktop?
  22. 22. Distribution Is The Hardest Problem In Software flickr.com/photos/blakespot/
  23. 23. The Mobile Explosion
  24. 24. ● Runs the “desktop Web” ● Pinch and zoom, Pan, etc ● Hitchhikers guide to the galaxy is in your pocket! The Mobile Internet came when it brought the Web
  25. 25. Access to the back catalog is great, but you want to use the new affordances and power
  26. 26. What if the Web evolved those capabilities, just as it did with Ajax?
  27. 27. What's Missing? 1. Home Screen Access 2. Push Notifications 3. Offline
  28. 28. 1. Home screen Access Less typing, more tapping.
  29. 29. 2. Push Notifications How can we re-engage users at the right time?
  30. 30. 1. Works If Browser Closed 2. Needs Permission
  31. 31. 3. Offline That Works™ It isn't an app if it doesn't start when you tap.
  32. 32. example.com GET /app.html HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015 05:21:56 GMT ...
  33. 33. example.com // sw.js onfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /app.html HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015... ...
  34. 34. Service Workers Are Network Progressive Enhancement A Programmable Network Proxy under your control.
  35. 35. Service Workers are to Progressive Web Apps as XMLHttpRequest was to Ajax The foundational capability that was a tipping point for innovation
  36. 36. Impact of speed on bounce rates Source: SOASTA; September, 2015 2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9 180,000 140,000 100,000 60,000 0 20,000 58 45 32 19 0 6 Sessions Load time (in seconds) Bouncerate(%) Sessions Bounce rate 13% bounce rate 20% bounce rate 58% bounce rate
  37. 37. LoadIdleResponse Animation RAIL performance model
  38. 38. RAIL: Instant loading and smooth navigation ● For first visitors, load pages in <10s on 3G net ○ Aspirational goal: <3s to first paint ● For repeat visitors, loading of page in <500 ms ● Always scrolling at 60 frames/second ● Content shouldn’t jump as images are loaded
  39. 39. ● Reliable: Fast loading, offline and on flaky networks ● Fast: Smooth animation, scrolling and nav ● Engaging and integrated ○ On the home screen, no URL bar. ○ Re-engaging with push notifications ● Consistent experience across browsers The Progressive Web App Experience
  40. 40. The Progressive Web App - Examples https://noter-1.firebaseapp.com/https://voice-memos.appspot.com
  41. 41. e-commerce
  42. 42. ● Users time on Flipkart lite vs. previous experience: 3.5 minutes vs 70 seconds. ● 3x more time spent on site ● 40% higher re-engagement rate ● 70% greater conversion rate among those arriving via Add to Homescreen ● 3x lower data usage ● Flipkart case study
  43. 43. 26%increase in average spend per visit by members arriving via a push notification 72%increase in time spent for users visiting via a push notification +50%repeat visits within 3 months
  44. 44. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
  45. 45. Proprietary + Confidential PWA 4 Startups ● The magic engine: users -> feedback -> product improvement ● Growth and momentum ○ Get new things. Fast. ○ New version every day ○ Test new features ○ Monetization
  46. 46. THANK YOU! Ido Green @greenido

×