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.

Building an Appier Web - London Web Standards - Nov 2016

388 views

Published on

Explores progressive web apps, what advantages they have versus native apps, how to build, and test them, and some of the challenges we still have ahead.

Slides from talk at London Web Standards, Nov 2016

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building an Appier Web - London Web Standards - Nov 2016

  1. 1. Building an Appier Web @AndyDavies NCC Group Nov 2016 https://www.flickr.com/photos/alesimages/4215559895
  2. 2. We’re spending more and more time in apps… © comScore, Inc. Propri Digital media usage time is exploding right now, and it’s predominantly being driven by mobile apps. 476,553 480,967 550,522 409,847 621,410 778,95477,081 97,440 118,299 0 200,000 400,000 600,000 800,000 1,000,000 1,200,000 1,400,000 1,600,000 Jun-2013 Jun-2014 Jun-2015 TotalMinutes(MM) Desktop Mobile App Mobile Browser Over the past years, total dig media usage h grown 49% wit mobile apps ha grown 90% an contributing to of the total incr in time spent. Mobile browse also seeing ve strong growth 53% and even desktop is still rising. Growth in Digital Media Time Spent Source: comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience +53% vs. 2013 +90% vs. 2013 +16% vs. 2013
  3. 3. © comScore, Inc. Prop 29% 15% 11% 6% 6% 4% 3% 3% 23% Social Networking Radio Games Multimedia Instant Messengers Music Retail News/Information All Others Social Networ Radio and Ga contribute mo than half of to time spent on mobile apps. strength of the categories highlights that mobile device more heavily for entertainm and communi than their des counterparts. Share of Mobile App Time Spent Source: comScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015 Social media and entertainment account for the six top app categories and drive two-thirds of total time spent on apps.But our usage can be very specific
  4. 4. What do we like about apps? https://www.flickr.com/photos/jennicatpink/819741953
  5. 5. Launch from home screen
  6. 6. Splash screen on startup
  7. 7. A simple app… (App reads data from a monitoring API)
  8. 8. Works offline too
  9. 9. Works offline too (Cached data, so may be out of date)
  10. 10. Apps have their challenges too https://www.flickr.com/photos/justinjovellanos/15340862812
  11. 11. “There’s an App for that”… …but can you can find it?
  12. 12. To help we started with subtle buttons… but that wasn’t enough…
  13. 13. “Please, please download our app”
  14. 14. “Download our app or else!”
  15. 15. Updates, updates and more updates…
  16. 16. https://www.flickr.com/photos/michigancommunities/4614847059 Installing apps consumes storage and data
  17. 17. https://www.flickr.com/photos/piper/6199548216 So what about the web?
  18. 18. © comScore, Inc. Pro And mobile audience growth is being driven more by mobile we properties, which are actually bigger and growing faster than ap A comparison Top 1000 App the Top 1000 Web Propertie shows a surp result. Not on mobile web properties ha audiences tha more than 2.5 size, but thes audiences are growing twice fast. Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties Source: comScore Mobile Metrix, U.S., Age 18+ - 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 9,000 10,000 Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015 UniqueVisitors(000) Apps Mobile Web +42% y/y +21% y/y The web has great reach…
  19. 19. and it’s due to the simple power of the URL http://example.com
  20. 20. https://www.flickr.com/photos/aaronpk/5352508316 Makes the web linkable…
  21. 21. …indexable, searchable
  22. 22. And shareable https://www.flickr.com/photos/thomashawk/8598744061
  23. 23. Web pages adapt to our diversity of devices http://www.flickr.com/photos/adactio/12674230513
  24. 24. https://www.flickr.com/photos/protohiro/5769980863 And there are no gatekeepers
  25. 25. Or waiting for updates https://www.flickr.com/photos/star-bellied-girl/8283340977
  26. 26. What if…
  27. 27. We could combine the richness of apps… …with the low friction of the web?
  28. 28. https://www.flickr.com/photos/zedzap/13253676614
  29. 29. So what might we need to build it? https://www.flickr.com/photos/aigle_dore/7912377858
  30. 30. We can already add pages to our home screen Supported by most major mobile operating systems and browsers
 
 (Bookmarks page rather than site)
  31. 31. Can specify the icon etc. via meta tags <link rel="apple-touch-icon" href="icons/logo/ncc-logo-120x120-ios.png"> <link rel="apple-touch-icon-precomposed" href="icons/logo/ncc-logo-120x120-ios.png"> <link rel="apple-touch-startup-image" href="/images/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> (Minimal iOS set, ideally need more icon and splash screen sizes and other mobile browsers prefer different meta data)
  32. 32. W3C App Manifest brings it all together { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", } https://www.w3.org/TR/appmanifest/
  33. 33. Homescreen Icon { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  34. 34. URL of the page that’s launched { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  35. 35. Splash screen { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  36. 36. Orientation and presence of browser controls { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  37. 37. And can even offer an install prompt (Browsers use several heuristics before deciding to prompt)
  38. 38. Can listen for install event and track in analytics window.addEventListener('beforeinstallprompt', function(e) { e.userChoice.then(function(choiceResult) { console.log(choiceResult.outcome); if (choiceResult.outcome == 'dismissed') { // Track not installed } else { // Track installation } }); }); (Chrome supports this but it’s not in AppManifest standard)
  39. 39. Can listen for install event and track in analytics window.addEventListener('appinstalled', function(e) { // Track installation }); (AppManifest standard proposes this)
  40. 40. But how do we cope with a poor (or no) network? https://www.flickr.com/photos/odaeus/3942500793
  41. 41. http://alistapart.com/article/application-cache-is-a-douchebag Our first attempt had a few issues…
  42. 42. https://www.w3.org/TR/service-workers/ So we tried another approach
  43. 43. Service Worker is an in-browser network proxy that can intercept requests and responses
  44. 44. <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('serviceworker.js', { scope: '/' }).then(function(registration) { // Anything else you want to do with registration // e.g. subscribe to push messages }).catch(function(err) { console.log('Can't register service worker: ', err); }); } </script> Register a Service Worker
  45. 45. Option to install via Link may be coming <link rel="serviceworker" scope="/" href=“/serviceworker.js"> or Link </serviceworker.js>; rel=serviceworker scope=/ (Origin trial in Chrome, under consideration in Firefox)
  46. 46. Service Worker Skeleton self.addEventListener('install', function(event) { self.skipWaiting(); }); self.addEventListener('activate', function(event) { }); self.addEventListener('fetch', function(event) { });
  47. 47. What are apps actually made of?
  48. 48. Shell Content Many apps are made of a shell and the content
  49. 49. Going offline - caching assets on startup var cacheVersion = "v1"; var cacheResources = [ "/pwa/index.html", "/pwa/icons/logo/ncc-logo.svg", "/pwa/icons/ui/sprite.svg" // etc ]; self.addEventListener('install', function(event) { self.skipWaiting(); event.waitUntil( caches.open(cacheVersion).then(function(cache) { return cache.addAll(cacheResources); }) );
  50. 50. Going offline - retrieving from cache on fetch self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); }); Try the cache first and go to the network if there’s no match
  51. 51. Going offline - cleanup previous resources self.addEventListener('activate', function(event) { // Remove outdated caches, migrate data etc, });
  52. 52. Caching as a fallback for network • Make a request • Succeeds - cache response and return it • Fails - check cache and return cached response • Network request fails and not in cache ¯_( )_/¯ (OK so you probably want to manage the users experience in the last case)
  53. 53. Caching patterns depend on use case, some very helpful resources Mozilla https://serviceworke.rs/ Jake Archibald https://jakearchibald.com/2014/offline-cookbook/ ServiceWork Toolbox https://github.com/GoogleChrome/sw-toolbox
  54. 54. Service Worker also enables other features
  55. 55. https://www.w3.org/TR/push-api/ Push Notifications
  56. 56. When put together…
  57. 57. When put together…
  58. 58. (App reads data from a monitoring API) When put together…
  59. 59. When put together…
  60. 60. (Cached data, so may be out of date) When put together…
  61. 61. Powerful APIs (inc Service Worker) require HTTPS https://www.flickr.com/photos/zebble/6080622
  62. 62. “The future is here, it’s just unevenly distributed” ✓ ✓ ✓ WiP ?✓
  63. 63. We’re getting better access to native features • Camera • Notifications • Location • Geofencing • Alarms • Vibration • Sharing • Battery • and more… (On some platforms)
  64. 64. background sync https://wicg.github.io/BackgroundSync/spec/ Background Sync (draft)
  65. 65. Easier payment mechanisms https://www.w3.org/TR/payment-request/
  66. 66. https://www.flickr.com/photos/acearchie/4369849179 “So how do we test this thing?”
  67. 67. Chrome DevTools
  68. 68. https://github.com/GoogleChrome/lighthouse Lighthouse
  69. 69. https://speedcurve.com/blog/pwa-performance/ WebPageTest
  70. 70. WebPageTest
  71. 71. You can deploy them today • 3x more time spent on site • 40% higher re-engagement rate • 70% greater conversion rate for those arriving via Homescreen • 3x lower data usage
  72. 72. https://flights.airberlin.com/en-US/progressive-web-app AirBerlin demo at Google I/O
  73. 73. My current favourite… Doesn’t support notifications yet… …hopefully will do soon
  74. 74. These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ Alex Russell, Google
  75. 75. I still have questions… • What might not be suitable as a progressive web app? • Can we build PWAs that are as fast and frictionless as native? • How can we sell our apps, will we need app stores? • How do we avoid an uncanny UI valley? • What happens to storage when every site is a PWA?
  76. 76. “Every step on the path to a PWA makes sense on it’s own” Jason Grigsby
  77. 77. http://www.flickr.com/photos/auntiep/5024494612 @AndyDavies andy.davies@nccgroup.trust http://slideshare.net/andydavies

×