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 TLV

5,911 views

Published on

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They load quickly, even on flaky networks, can re-engage with users by sending web push notifications, have an icon on the home screen and load as top-level, full screen experiences.

These are the slides from my talk at Campus TLV.
The contain the links to the code labs and explanations so you can do it on your own time.

Comments/Feedback is most welcome. Both on @greenido and/or +Greenido

Published in: Internet
  • Be the first to comment

Progressive Web Apps TLV

  1. 1. Progressive Web Apps Tel Aviv 2016 g.co/progressivewebapps
  2. 2. Code of Conduct goo.gl/O96sJg
  3. 3. Slack Join chromiumdev-slack.herokuapp.com Login chromiumdev.slack.com
  4. 4. Twitter @ChromiumDev
  5. 5. Proprietary + Confidential Ido Green @greenido
  6. 6. Proprietary + Confidential Progressive Web Apps Mobile has natively come to the Web
  7. 7. The Big Bang of Computing
  8. 8. <!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>
  9. 9. Ajax was born to run desktop apps on the Web
  10. 10. How did the Web beat native applications on the desktop?
  11. 11. Distribution Is The Hardest Problem In Software flickr.com/photos/blakespot/
  12. 12. The Mobile Explosion
  13. 13. Confidential & Proprietary ● 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
  14. 14. Confidential & Proprietary Access to the back catalog is great, but you want to use the new affordances and power
  15. 15. What if the Web evolved those capabilities, just as it did with Ajax?
  16. 16. What's Missing? 1. Home Screen Access 2. Push Notifications 3. Offline
  17. 17. 1. Home screen Access Less typing, more tapping.
  18. 18. 2. Push Notifications How can we re-engage users at the right time?
  19. 19. 1. Works If Browser Closed 2. Needs Permission
  20. 20. 3. Offline That Works™ It isn't an app if it doesn't start when you tap.
  21. 21. 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 ...
  22. 22. 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... ...
  23. 23. Service Workers Are Network Progressive Enhancement A Programmable Network Proxy under your control.
  24. 24. Service Workers are to Progressive Web Apps as XMLHttpRequest was to Ajax The foundational capability that was a tipping point for innovation
  25. 25. 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
  26. 26. Confidential & Proprietary 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
  27. 27. Confidential & Proprietary ● Reliable: Fast loading, offline and on flaky networks ● Fast: Smooth animation, scrolling and nav ● Engaging and integrated ○ On the home screen, no URL bar, icons, splash ○ Re-engaging with push notifications ● Consistent experience across browsers (still in progress, though) The Progressive Web App Experience
  28. 28. Confidential & Proprietary The Progressive Web App - Examples https://noter-1.firebaseapp.com/https://voice-memos.appspot.com
  29. 29. e-commerce
  30. 30. ● 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 ● Read more on Flipkart case study
  31. 31. 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
  32. 32. Kill Your Dinosaur!
  33. 33. Progressive Web App Code Lab
  34. 34. Code Time! 1. PWA - g.co/codelabs/pwa 2. Push Notifications - goo.gl/oFwPaV
  35. 35. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
  36. 36. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Enter Progressive Web Apps ● Fast loading ● One click away from accessing content ● Smooth animations and navigations ● Re-engages with push notifications ● Good experience on flaky network connections ● Consistent experience across browsers
  37. 37. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Enabling app-like capabilities Service Worker ● Client-side proxy written in JavaScript ● Access device capabilities to allow your site to be “app like”
  38. 38. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Enabling app-like capabilities Service Worker ● Client-side proxy written in JavaScript ● Access device capabilities to allow your site to be “app like” Web App Manifest ● Rich presence on user’s Android homescreen ● Launch in full-screen mode on Android ● Control the screen orientation ● Define “splash screen” launch, theme color for site { "short_name": "My Cool App", "name": "My Totally Cool Application", "icons": [ {"src": "launcher-icon-3x.png", "sizes": "192x192", "type": "image/png"}], "start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape" }
  39. 39. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Add to Homescreen & Full Screen ● User who visits 2x in a within five minutes will be prompted with “add to homescreen” ● One tap to add to homescreen ● Opens full screen - no URL bar
  40. 40. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem A few tips before we start... ● Chapters 6 & 7 will take the longest ● Service Workers - Tips ○ Don't forget to change the cacheName ○ Use an incognito window to ensure a fresh start ○ Keep only one tab open at a time ○ chrome://serviceworker-internals & DevTools are your new best friends ○ Read More tips on Noter PWA Example
  41. 41. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Let’s build it! g.co/codelabs/pwa Questions? Ask!
  42. 42. THANK YOU! Ido Green @greenido
  43. 43. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Misc Helpful links ● https://www.chromium.org/blink/serviceworker/service-worker-faq ● https://www.chromium.org/blink/serviceworker/getting-started
  44. 44. Coffee Break 3:30pm
  45. 45. voice-memos.appspot.com
  46. 46. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Let’s do better.
  47. 47. Proprietary + Confidential Final thoughts

×