Building an Appier Web - May 2016

283 views

Published on

Slides from my talk at NCC Group's Web Performance Day in May 2016.
Compares the features of apps and the web, what's great about each and explores some of the technologies that will allow us to build websites that can deliver native like experiences.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
283
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building an Appier Web - May 2016

  1. 1. Building an Appier Web @AndyDavies, NCC Group, May 2016 https://www.flickr.com/photos/alesimages/4215559895
  2. 2. We’re spending more and more time in apps… Digital media usage time is exploding right now, and it’ 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 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. 29% 15% 11% 6% 6% 4% 3% 3% 23% Social Networking Radio Games Multimedia Instant Messengers Music Retail News/Information All Others 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 categories and drive two-thirds of total time spent on aBut our usage can be very specific
  4. 4. What do we like about apps? https://www.flickr.com/photos/jennicatpink/819741953
  5. 5. Demo (Next few slides were originally shown as a live demo)
  6. 6. Launch from home screen
  7. 7. Splash screen on startup
  8. 8. A simple app…
  9. 9. Works offline too
  10. 10. Works offline too
  11. 11. Apps have their challenges too https://www.flickr.com/photos/justinjovellanos/15340862812
  12. 12. “There’s an App for that”… …but can you can find it?
  13. 13. To help we started with subtle buttons… but that wasn’t enough…
  14. 14. “Please, please download our app”
  15. 15. “Download our app or else”
  16. 16. Updates, updates and more updates…
  17. 17. https://www.flickr.com/photos/michigancommunities/4614847059 Installing apps consumes storage and data
  18. 18. https://www.flickr.com/photos/piper/6199548216 So what about the web?
  19. 19. And mobile audience growth is being driven more by m properties, which are actually bigger and growing faste 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…
  20. 20. and it’s due to the simple power of the URL http://example.com
  21. 21. https://www.flickr.com/photos/aaronpk/5352508316 Makes the web linkable…
  22. 22. …indexable, searchable
  23. 23. And shareable https://www.flickr.com/photos/thomashawk/8598744061
  24. 24. Web pages adapt to our diversity of devices http://www.flickr.com/photos/adactio/12674230513
  25. 25. https://www.flickr.com/photos/protohiro/5769980863 And there are no gatekeepers
  26. 26. Or waiting for updates https://www.flickr.com/photos/star-bellied-girl/8283340977
  27. 27. What if…
  28. 28. We could combine the richness of apps… …with the low friction of the web?
  29. 29. https://www.flickr.com/photos/zedzap/13253676614
  30. 30. So what might we need to build it? https://www.flickr.com/photos/aigle_dore/7912377858
  31. 31. We can already add pages to our home screen Supported by most major mobile operating systems and browsers
 
 (Bookmarks page rather than site)
  32. 32. 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)
  33. 33. W3C App Manifest brings it all together { "lang": "en", "dir": "ltr", "name": "Performance Matters", "description": "Performance Matters - NCC Group Web Performance", "short_name": "Performance Matters", "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": "#fff", "background_color": "#fff",
  34. 34. Homescreen Icon { "lang": "en", "dir": "ltr", "name": "Performance Matters", "description": "Performance Matters - NCC Group Web Performance", "short_name": "Performance Matters", "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": "#fff", "background_color": "#fff",
  35. 35. URL of the page that’s launched { "lang": "en", "dir": "ltr", "name": "Performance Matters", "description": "Performance Matters - NCC Group Web Performance", "short_name": "Performance Matters", "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": "#fff", "background_color": "#fff",
  36. 36. Splash screen { "lang": "en", "dir": "ltr", "name": "Performance Matters", "description": "Performance Matters - NCC Group Web Performance", "short_name": "Performance Matters", "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": "#fff", "background_color": "#fff",
  37. 37. Orientation and presence of browser controls { "lang": "en", "dir": "ltr", "name": "Performance Matters", "description": "Performance Matters - NCC Group Web Performance", "short_name": "Performance Matters", "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": "#fff", "background_color": "#fff",
  38. 38. And can even offer an install prompt (Browsers use several heuristics before deciding to prompt)
  39. 39. But how do we cope with a poor (or no) network? https://www.flickr.com/photos/odaeus/3942500793
  40. 40. http://alistapart.com/article/application-cache-is-a-douchebag Our first attempt had a few issues…
  41. 41. https://www.w3.org/TR/service-workers/ So we tried another approach
  42. 42. Service Worker is an in-browser network proxy that can intercept requests and responses
  43. 43. <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(function(registration) { }).catch(function(err) { console.log('Can't register service worker: ', err); }); } </script> Register a Service Worker
  44. 44. Service Worker Skeleton self.addEventListener('install', function(event) { self.skipWaiting(); . . . }); self.addEventListener('activate', function(event) { . . . }); self.addEventListener('fetch', function(event) { . . . });
  45. 45. What are apps actually made of?
  46. 46. Shell Content Many apps are made of a shell and the content
  47. 47. 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); }) ); }); Store a set of resources in cache when service worker is installed
  48. 48. 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); }) ); }); On fetch, check cache for resource, otherwise retrieve from network
  49. 49. https://jakearchibald.com/2014/offline-cookbook/ Not just for offline - other caching patterns
  50. 50. Service Worker also enables other features
  51. 51. background sync https://wicg.github.io/BackgroundSync/ Background Sync (draft)
  52. 52. https://www.w3.org/TR/push-api/ Push Notifications
  53. 53. When put together…
  54. 54. When put together…
  55. 55. When put together…
  56. 56. When put together…
  57. 57. When put together…
  58. 58. Getting better access to native features • Camera • Location • Notifications • Alarms • Vibration • and more…
  59. 59. Powerful APIs (inc Service Worker) require HTTPS https://www.flickr.com/photos/zebble/6080622
  60. 60. “The future is here, it’s just unevenly distributed” ✓ ✓ ✓ ? ?
  61. 61. It’s being used 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
  62. 62. 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
  63. 63. http://www.flickr.com/photos/auntiep/5024494612 @AndyDavies andy.davies@nccgroup.trust http://slideshare.net/andydavies

×