Upgrade to Pro — share decks privately, control downloads, hide ads and more …

App Fest 2016, Bangalore, India.

App Fest 2016, Bangalore, India.

Progressive Web Apps: the UX of native, the reach o=f the web

bruce lawson

July 15, 2016

More Decks by bruce lawson

Other Decks in Technology


  1. Who’s Bruce? ▪ Deputy C.T.O., Opera Software ▪ Author of

    “Introducing HTML5” ▪ Previously: Developer Relations, Opera ▪ Web Developer, Standardiser ▪ Star of “Maharjah Ranjit Singh” (1994) @brucel
  2. Why did apps come about? ▪ The Web wasn’t powerful

    enough ▪ Device integration @brucel
  3. There’s an API for that ▪ Geolocation ▪ Touch ▪

    Accelerometer ▪ Web Audio ▪ <canvas>, WebGL ▪ WebRTC @brucel
  4. 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 @brucel
  5. 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 @brucel
  6. Millions of mobile-first/only users have come online the last couple

    of years. They have specific needs & concerns. @brucel
  7. A quick story: We found that a subset of active

    Opera for Android users was not updating. We asked them why. @brucel
  8. It turned out that, in many cases, their data package

    was so limited they were afraid to run out of data by updating; also, some had run out of storage space. @brucel
  9. Average android app gets uninstalled by 77% of users in

    24 hrs. By day 90, install retention is down to 3.97% “ Unappiness - http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/ @brucel
  10. Downloading a typical app with 20 MB APK can take

    more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network. “ - How we built Facebook Lite for every Android phone and network @brucel
 With space this limited, the user is comparing

    their personal photo collection with the adoption of a new app on their phone. “ - Mobile App Developers Are Suffering @brucel
  12. we didn’t stand a chance as we were fighting with

    both our competitors and other apps for a few more MB of room inside people’s phones. “ Birdly - Why you shouldn’t bother creating a mobile app @brucel
  13. “With PWAs […], without the download overhead of native apps

    […] developers in Nigeria can now give a great and up-to-date experience to their users.” @brucel
  14. 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. @brucel
  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" } @brucel
  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": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true" } @brucel
  17. { "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" } @brucel
  18. { "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/ @brucel
  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" } @brucel
  20. “If I were to pick just one feature of PWAs

    that I’m super-excited about, it’s the ability to detect and handle offline / unreliable network conditions with service workers.” @brucel
  21. Web Apps with Service Workers can also use Push Notifications

    to drive engagement, even when the browser/app isn’t open. “ Push notifications -https://developers.google.com/web/fundamentals/getting-started/push-notifications/?hl=en @brucel
  22. 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 @brucel
  23. Where does this work? ▪ Opera for Android
 ▪ Chrome

    for Android
 ▪ Firefox for Android (soon) ▪ Microsoft Edge and Windows (soon)
 ▪ Safari/ iOS (homescreen-only, non-standard) @brucel
  24. Progressive Web Apps ▪ live on the server so no

    update distribution lag
 ▪ require no app store or gatekeeper
 ▪ are a normal website on browsers such as Opera Mini, Safari, Windows phones
 ▪ searchable, indexable, linkable
 ▪ can work offline @brucel
  25. There’s also an “Extreme mode” setting, which is the classic

    Presto-based compression mode, resulting in large savings (and some breakage). @brucel
  26. We’re moving users as much as possible over to the

    webview-powered modes (sometimes dynamically), but many still use extreme mode. @brucel Also note: Opera Mini on iOS also ships with multiple modes, whereas Opera Mini for J2ME & Opera Mini for Windows Phone only ship with extreme mode.
  27. For this reason, it’s important you build your apps carefully

    balancing content, presentation and client-side scripting, following progressive enhancement principles as much as possible. https://dev.opera.com/articles/making-sites-work-opera-mini/ @brucel
  28. we've launched our first Holy Grail app into production! …

    It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker “ Progressive enhancement = UX - AirBnB
  29. because we serve up real HTML instead of waiting for

    the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. … It feels 5x faster. “ Holy Grail App - AirBnB
  30. Thanks ▪ Me by HTML sign in Tokyo by Doug

    Schepers (@shepazu), used with permission ▪ Flurry graphs used by kind permission of Flurry 
 http://flurrymobile.tumblr.com/post/115188952445/flurry-five-year-report-its-an-app-world-the @brucel