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.

Chris Wilson: Progressive Web Apps

574 views

Published on

Mozilla's View Source 2016 in Berlin

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Chris Wilson: Progressive Web Apps

  1. 1. Chris Wilson
 @cwilso Google Progressive Web Apps
  2. 2. vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 13% 87% Mobile web Apps
  3. 3. 80%OF TIME SPENT IS IN USERS’ TOP 3 APPS Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
  4. 4. ZERONUMBER OF APPS AVERAGE USER INSTALLS PER MONTH Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
  5. 5. Capability Reach
  6. 6. Capability Reach
  7. 7. Capability Reach
  8. 8. are (a new level of) caring about the quality of your user experience Progressive Web Apps
  9. 9. Reliable User experiences need to be...
  10. 10. Lie-Fi
  11. 11. Reliability means 
 never showing the Downasaur
  12. 12. Reliable Fast User experiences need to be...
  13. 13. of users abandon sites that take longer than 3 seconds to load40%
  14. 14. Reliable Fast Engaging User experiences need to be...
  15. 15. Full screen, theming, orientation, etc. Push notifications Immersive Notifications Engaging Auto-adding to Home Screen Home Screen
  16. 16. https://wapo.com/pwa https://wapo.com/pwa
  17. 17. `80ms article page load time in 
 the Progressive Web App Poynter article
  18. 18. Reliable Fast Engaging Progressive Web Apps are…
  19. 19. How do you get started?
  20. 20. Focus on the User
  21. 21. Stay Secure
  22. 22. ` HTTPS: Secure connection between site and users
  23. 23. The Cost of HTTPS Certificate Search Ranking
  24. 24. Let’s Encrypt is a trademark of the Internet Security Research Group.
  25. 25. The Cost of HTTPS Certificate Search Ranking
  26. 26. Search Ranking Guidance bit.ly/https-migration
  27. 27. Build a Service Worker
  28. 28. Web server
  29. 29. Service worker Client side proxy 
 (written in JavaScript) Cache Web server
  30. 30. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  31. 31. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  32. 32. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  33. 33. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  34. 34. is for the SECOND load. Service Worker
  35. 35. Implementing a simple Service Worker
  36. 36. Register the Service Worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(reg) { console.log('Service Worker Registered', reg); }) .catch(function(err) { console.log('Error registering Service Worker', err); }); }
  37. 37. Register the Service Worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(reg) { console.log('Service Worker Registered', reg); }) .catch(function(err) { console.log('Error registering Service Worker', err); }); }
  38. 38. Activated Error Idle Active Terminated Install Register Pre-fetch the App Resources
  39. 39. Pre-fetch the App Resources var cacheName = 'app-shell-cache-v1'; var filesToCache = ['/', '/index.html', ...]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); }).then(function() { return self.skipWaiting(); }) ); });
  40. 40. Pre-fetch the App Resources var cacheName = 'app-shell-cache-v1'; var filesToCache = ['/', '/index.html', ...]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); }).then(function() { return self.skipWaiting(); }) ); });
  41. 41. Activated Error Idle Active Terminated Install Register Not Done Yet...
  42. 42. Add a fetch Event Handler self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); });
  43. 43. Add a fetch Event Handler self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); });
  44. 44. Add a fetch Event Handler self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); });
  45. 45. Add a fetch Event Handler self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); });
  46. 46. Activated Error Idle Active Terminated Install Register Ready to Go!
  47. 47. control YOU ARE IN
  48. 48. Caching strategies galore!
  49. 49. Engage Your Users
  50. 50. Add to Home Screen
  51. 51. Add To Home Screen Was Broken
  52. 52. Add To Home Screen Was Broken Required user interaction
 Buried deep in menus
  53. 53. Add To Home Screen Was Broken Required user interaction
 Buried deep in menus Where would it start?
 Dependent on bookmark
  54. 54. Add To Home Screen Was Broken Required user interaction
 Buried deep in menus Where would it start?
 Dependent on bookmark Would it work offline?
 Users didn't expect offline
  55. 55. Add To Home Screen Was Broken
  56. 56. <link rel="manifest" href="/manifest.json"> { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  57. 57. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  58. 58. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  59. 59. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  60. 60. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  61. 61. ` Good, but what about prompt to install?
  62. 62. A Promise to the User Consistent Experience Works Offline The User is Engaged
  63. 63. ` Web Push 
 Notifications
  64. 64. ` Web Push 
 Notifications The browser doesn’t need to be open!
  65. 65. `
  66. 66. ` 38%
 open rate 9x
 more conversions on previously abandoned carts
  67. 67. Built on Service Workers example.com /* ServiceWorker.js */ onfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /content.json HTTP/1.1 HOST example.com GET /content.json HTTP/1.1 HOST example.com GET /app.html HTTP/1.1 HOST example.com
  68. 68. Built on Service Workers /* ServiceWorker.js */ onpush = function(event) { var data = event.data.json(); var t = data.title; var opt = { body: data.body, icon: data.icon, tag: data.tag }; self.registration .showNotification(t, opt); }; End Point example.com
  69. 69. Stay Secure
  70. 70. Use a Service Worker
  71. 71. Engage Your Users
  72. 72. `
  73. 73. ` 
 2x more page views 74% increase in time spent
  74. 74. ` 
 2x more page views 74% increase in time spent 82% more conversions on iOS
  75. 75. is progressive. Progressive Web App
  76. 76. not the tech. Focus on the user
  77. 77. Go build! meow

×