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.

Bruce Lawson: Progressive Web Apps: the future of Apps

4,037 views

Published on

Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.

Published in: Technology

Bruce Lawson: Progressive Web Apps: the future of Apps

  1. 1. Progressive Web Apps: the future of apps Bruce Lawson Opera Software
  2. 2. Native Apps are a bridging technology (like Flash)
  3. 3. Why did apps come about? • The Web wasn’t powerful enough • Device integration
  4. 4. There’s an API for that • Geolocation • Touch • Accelerometer • Web Audio • <canvas>, WebGL • WebRTC
  5. 5. It's an App World. The Web Just Lives in It “Today, the U.S. consumer spends an average of 2 hours and 38 minutes per day on smartphones and tablets. 80% of that time (2 hours and 7 minutes) is spent inside apps and 20% (31 minutes) is spent on the mobile web.” blog.flurry.com April, 2013
  6. 6. User Experience is a feature too!
  7. 7. Progressive Web Apps • “install” to the home screen • have their own icon (defined by the web developer) • can launch full-screen, portrait or landscape • but “live” on the Web
  8. 8. Manifest file stores metadata for your web app: icons, description, colors, and related info that lets browsers create high-quality experiences for the launcher icon, task switcher, and splash screen.
  9. 9. To tell the browser about our Web Manifest, we add this to the <head> <link rel="manifest" href="/manifest.json">
  10. 10. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  11. 11. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  12. 12. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  13. 13. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  14. 14. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  15. 15. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  16. 16. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  17. 17. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  18. 18. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  19. 19. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  20. 20. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  21. 21. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  22. 22. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  23. 23. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  24. 24. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  25. 25. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  26. 26. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  27. 27. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  28. 28. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "browser", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  29. 29. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  30. 30. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" } CSS @media (display-mode: standalone) { h3:after {content: " in standalone mode!"} }
  31. 31. { "name": "Air Horner", "short_name": "Air Horner", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#2196F3", "background_color": "#2196F3", "display": "fullscreen", "orientation": "portrait", "start_url": "/?home=true" }
  32. 32. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#990000", "background_color": "#DFCFAF", "display": "fullscreen", "orientation": "landscape", "start_url": "/inbox-attack/?home=true" } https://andreasbovens.github.io/inbox-attack/
  33. 33. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" } Simple way to keep track of launch trends
  34. 34. Tools • Manifest Generator http://brucelawson.github.io/ manifest/ • Manifest validator manifest-validator.appspot.com
  35. 35. Opera differences • HTTP-hosted sites will only display with browser UI, regardless of what the manifest states • When the user follows a link that takes the user out of the domain of the installed app, a new tab is spawned, with browser chrome. (Chrome shows a small address at the top of a standalone-app. We prefer to make it more obvious to the user that they have gone outside your app.) • Opera doesn’t (yet) support background_color; this will be added in a forthcoming release.
  36. 36. Going Offline
  37. 37. Service Worker • Service Worker allows developers to cache assets when connected, and intercept failed calls to network when offline, so user experience can be maintained. • Faster loading of assets, even when online. • https://developers.google.com/web/fundamentals/ primers/service-worker/ • https://www.smashingmagazine.com/2016/02/ making-a-service-worker/
  38. 38. { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  39. 39. Better Engagement
  40. 40. Push notifications • Web Apps with Service Workers can also use Push Notifications to drive engagement, even when the browser/ app isn’t open. • https://developers.google.com/web/fundamentals/ getting-started/push-notifications/?hl=en
  41. 41. Beyond the Rack • 72% increase in time spent for users visiting via a push notification • 26% increase in average spend per visit by members arriving via a push notification • +50% repeat visits within 3 months
  42. 42. Where does this work? • Opera for Android • Chrome for Android • Firefox for Android (soon) • Safari/ iOS (non-standard)
  43. 43. Progressive Web Apps • live on the server so no update distribution lag • require no app store or gatekeeper • can work offline • are a normal website on browsers such as Opera Mini, Safari, Windows phones • searchable, indexable, linkable
  44. 44. Flipkart Lite • 40% returning visitors week over week • +63% conversions from Home screen visits • 3x time spent on FlipKart Lite
  45. 45. The UX of apps + the reach of the Web =The Future
  46. 46. • brucel@opera.com • twitter.com/brucel • www.brucelawson.co.uk

×