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. Progressive Web Apps Bruce Lawson, Opera Software

  2. 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
  3. None

  5. Why did apps come about? ▪ The Web wasn’t powerful

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

    Accelerometer ▪ Web Audio ▪ <canvas>, WebGL ▪ WebRTC @brucel
  7. 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
  8. None
  9. None
  10. @brucel

 IS A FEATURE TOO! @brucel

  12. 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
  13. Millions of mobile-first/only users have come online the last couple

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

    Opera for Android users was not updating. We asked them why. @brucel
  15. 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
  16. 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
  17. 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
  19. 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
  20. @brucel

  21. @brucel

  22. https://dev.opera.com/articles/pwa-nigeria-kenya-interview/ “Nigerians are extremely data sensitive.” “People side-load apps and

    other content from third parties [or via] Xender.” Constance Okoghenun: @brucel
  23. “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
  24. Early progressive web apps in Asia & Africa @brucel

  25. UNDER THE HOOD OF A PWA @brucel

  26. 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
  27. <link rel="manifest" href="/manifest.json"> all in the <head> @brucel

  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": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" } @brucel
  29. STARTING A PWA @brucel

  30. @brucel

  31. { "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
  32. { "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
  33. { "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
  34. Tools Manifest Generator http://brucelawson.github.io/manifest/ 
 Manifest validator manifest-validator.appspot.com
 List of

    PWAs pwa.rocks @brucel
  35. { "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
  36. @brucel

  37. @brucel

  38. GOING OFFLINE @brucel

  39. @brucel

  40. @brucel

  41. @brucel

  42. @brucel

  43. “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

  45. 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
  46. 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
  47. 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
  48. 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
  49. @brucel


    =THE FUTURE @brucel
  51. @brucel

  52. Let’s talk about @brucel

  53. Almost 250 million people every month use Opera Mini. @brucel

  54. Opera Mini now has multiple rendering modes on Android. @brucel

  55. On data, it uses built-in webview with compression. @brucel

  56. @brucel On WiFi, it uses built-in webview without compression, unless

    you turn it on.
  57. There’s also an “Extreme mode” setting, which is the classic

    Presto-based compression mode, resulting in large savings (and some breakage). @brucel
  58. None
  59. None
  60. None
  61. 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.
  62. Last year, Opera Mini saved Indian users 690 Crore Rupees

  63. So, what about PWA support? @brucel

  64. The webview-powered modes have solid standards support, incl. service workers.

  65. “Extreme mode” however does not support PWA features, and comes

    with limited JS support. @brucel
  66. 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
  67. 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
  68. 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
  69. PWA.ROCKS @brucel

  70. Developer tutorials: https://dev.opera.com/tags/pwa/

  71. brucel@opera.com opera.com/developer brucelawson.co.uk @brucel

  72. 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