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.

Progressive Web Apps

356 views

Published on

A short introduction to Progressive Web Apps shown in .NET Conf UY 2017. The idea was to understand what is a PWA, what is needed to implement one and show some examples.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Progressive Web Apps

  1. 1. 23 al 27 de Octubre 2017.NET Conf UY v2017 Progressive Web Apps Nicolás Bello Camilletti Lead Developer SOUTHWORKS
  2. 2. 23 al 27 de Octubre 2017.NET Conf UY v2017
  3. 3. PROGRESSIVEWEBAPP Es un conjunto de conceptos/herramientas/etc.
  4. 4. WEBCOMONATIVO No es un concepto nuevo
  5. 5. native web
  6. 6. native web
  7. 7. WEBAPPSENWINDOWS Pinned Sites Windows 7
  8. 8. WEBAPPSENWINDOWS Pinned Sites Windows 7 Packaged Web Apps Windows 8
  9. 9. WEBAPPSENWINDOWS Pinned Sites Windows 7 Packaged Web Apps Windows 8 Hosted Web Apps Windows 10
  10. 10. WEBAPPSENWINDOWS Pinned Sites Windows 7 Packaged Web Apps Windows 8 Progressive Web Apps Windows 10 Hosted Web Apps Windows 10
  11. 11. PROGRESSIVEWEBAPP a.k.a. “PWA”
  12. 12. PWA&ANDROID
  13. 13. Lyft ride.lyft.com
  14. 14. Lyft ride.lyft.com
  15. 15. BENEFICIOSDEWEBAPPS
  16. 16. WEBAPPSANDAN ENCUALQUIERLUGAR!
  17. 17. ONECODEBASETORULETHEMALL…
  18. 18. PWAS=MENORCOSTO(&TIEMPO) App core iPhone iPad Publicar en App Store Android Phone Android Tablet Publicar en Play Store Windows Publicar en Windows Store MacOS Publicar en Mac App Store Web Host Nativa Es requerido publicar en los App store
  19. 19. PWAS=MENORCOSTO(&TIEMPO) PWA Publicar en los App store es opcional (o por única vez) Host Free Nativa Es requerido publicar en los App store App core iPhone iPad Publicar en App Store Android Phone Android Tablet Publicar en Play Store Windows Publicar en Windows Store MacOS Publicar en Mac App Store Web Host App core iPhone iPad Android Phone Android Tablet Windows MacOS Web Other PWA-capable
  20. 20. PRINCIPIOSDEPWA
  21. 21. PWASSONSIMPLEMENTEWEBAPPS…
  22. 22. PWASSONSIMPLEMENTEWEBAPPS… ¡QUEPROVEENDEUNAEXCELENTE EXPERIENCIADEUSUARIO!
  23. 23. PWAES
  24. 24. PWAES Progressive
  25. 25. PROGRESSIVE
  26. 26. ¿QUÉESPROGRESSIVEENHANCEMENT? Mono
  27. 27. ¿QUÉESPROGRESSIVEENHANCEMENT? Stereo
  28. 28. ¿QUÉESPROGRESSIVEENHANCEMENT? Surround Sound
  29. 29. ¿QUÉESPROGRESSIVEENHANCEMENT? 5.1 Channel Surround Sound
  30. 30. ¿QUÉESPROGRESSIVEENHANCEMENT? 7.1 Channel Surround Sound
  31. 31. ¿QUÉESPROGRESSIVEENHANCEMENT? 16.2 Channel Surround Sound
  32. 32. ¿QUÉESPROGRESSIVEENHANCEMENT? A veces, mono es la única opción
  33. 33. ¿QUÉESPROGRESSIVEENHANCEMENT? Objectivo & tareas principales
  34. 34. ¿QUÉESPROGRESSIVEENHANCEMENT? Capacidades Experiencia
  35. 35. PESEASEGURADEQUELOSUSUARIOS PUEDANUSARTUPRODUCTO SINIMPORTARELCONTEXTO.
  36. 36. PROGRESSIVEENHANCEMENTWEB
  37. 37. PROGRESSIVEENHANCEMENTWEB type="email" Deltas de experiencia 1. ¿Soporta input para email? 2. ¿Algoritmo de validación implementado? 3. ¿Teclado virtual?
  38. 38. PROGRESSIVEENHANCEMENTWEB required Deltas de experiencia 1. ¿Soporta validación HTML?
  39. 39. PROGRESSIVEENHANCEMENTWEB aria-required="true" Deltas de experiencia 1. ¿El navegador expone la propiedad aria-required ? 2. Assistive tech implementation of aria-required?
  40. 40. required validation email validation dedicated keyboard PROGRESSIVEENHANCEMENTWEB Capabilities Experience text input required notification
  41. 41. PESEASEGURADEQUELOSUSUARIOS PUEDANUSARTUPRODUCTO SINIMPORTARELCONTEXTO.
  42. 42. PWAES Progressive Responsive
  43. 43. PWAES Network Independent Progressive Responsive
  44. 44. PWAES Network Independent Progressive Responsive App-Like
  45. 45. PWAOAPPNATIVA?
  46. 46. PWAES Network Independent Progressive Responsive App-Like Fresh
  47. 47. PWAES Network Independent Segura Progressive Responsive App-Like Fresh
  48. 48. PWAES Discoverable Network Independent Segura Progressive Responsive App-Like Fresh
  49. 49. PWAES Discoverable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
  50. 50. PWAES Discoverable Instalable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
  51. 51. LAAPPVAASEGUIRANDANDOENEL BROWSER.SÓLOPODRÍAHACERMÁSCOSAS CUANDOSE“INSTALE”.
  52. 52. WHATWEBCANDO.TODAY
  53. 53. PWAES Discoverable Instalable Linkeable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
  54. 54. { "lang": "en", "short_name": "My App", "name": "My Totally Awesome App", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "img/launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/pwa/?utm_source=homescreen", "display": "standalone", "orientation": "portrait", "background_color": "black" } WEBAPPMANIFEST Meta Tags 2.0
  55. 55. SERVICEWORKER Actua como servidor proxy entre la web app, el browser y la conexión (cuando está disponible)
  56. 56. Solo HTTPS No tiene acceso al DOM Solo se aceptan request asyncronicos Ejecuta separado del sitio Un solo service worker por alcance SERVICE WORKERS PROPIEDADES
  57. 57. PERO…PUEDOUSARLO?
  58. 58. 1. if ('serviceWorker' in navigator) { 2. navigator.serviceWorker.register('/service-worker.js') 3. .then(registration => { 4. console.log('Registered:', registration); 5. }) 6. .catch(error => { 7. console.log('Registration failed: ', error); 8. }); 9. } index.html
  59. 59. CICLODEVIDA
  60. 60. Service Worker Lifecycle Inicia la registraciónInstalling
  61. 61. 1. self.addEventListener('install', event => { 2. event.waitUntil( 3. caches.open('static-v1').then(cache => { 4. return cache.addAll([ 5. '/', 6. '/index.html', 7. '/styles.css', 8. '/main.js', 9. '/fallback.html' 10. ]); 11. }) 12. ); 13. } sw.js
  62. 62. Service Worker Lifecycle Inicia la registraciónInstalling
  63. 63. Service Worker Lifecycle Inicia la registraciónInstalling Se completó la registraciónInstalled
  64. 64. Service Worker Lifecycle Inicia la registraciónActivating Inicia la registraciónInstalling Se completó la registraciónInstalled
  65. 65. 1. self.addEventListener('activate', event => { 2. var keepList = ['assets-v1']; 3. 4. event.waitUntil( 5. caches.keys().then(function(cacheNameList) { 6. return Promise.all(cacheNameList.map(function(cacheName) { 7. if (keepList.indexOf(cacheName) === -1) { 8. return caches.delete(cacheName); 9. } 10. })); 11. }) 12. ); 13. } sw.js
  66. 66. Service Worker Lifecycle Inicia la registraciónActivating Ya se pueden escuchar eventosActivated Inicia la registraciónInstalling Se completó la registraciónInstalled
  67. 67. Service Worker Lifecycle Inicia la registraciónActivating Ya se pueden escuchar eventosActivated Inicia la registraciónInstalling Se completó la registraciónInstalled El SW se está reemplazando por otroRedundant
  68. 68. 1. self.addEventListener('fetch', event => { 2. event.respondWith( 3. caches.match(event.request).then(response => { 4. return response || fetch(event.request).catch(() => { 5. return caches.match('/fallback.htm1'); 6. }); 7. }) 8. ); 9. } sw.js
  69. 69. FETCH!
  70. 70. EXPUESTOAJAVASCRIPT FETCH(),REQUESTYRESPONSE
  71. 71. 1. fetch('weather.json') 2. .then(function(response) { 3. if (response.headers.get('content-type') == 'application/json') { 4. return response.json(); 5. } else { 6. throw new TypeError(); 7. } 8. }) 9. .then(processJSON); index.html
  72. 72. 1. self.addEventListener('fetch', event => { 2. event.respondWith( 3. fetch(event.request) 4. ); 5. } sw.js
  73. 73. 1. self.addEventListener('fetch', event => { 2. event.respondWith( 3. fetch(event.request) 4. ); 5. } sw.js
  74. 74. 1. self.addEventListener('fetch', event => { 2. event.respondWith( 3. fetch(event.request) 4. ); 5. } sw.js
  75. 75. 1. self.addEventListener('fetch', event => { 2. event.respondWith( 3. fetch(event.request) 4. ); 5. } sw.js
  76. 76. CACHEAPIS
  77. 77. CACHES API ANATOMY REQUEST (URL) RESPONSE https://weather.app/index.html <!doctype html> https://weather.app/script.js console.log('test') . . . key / value storage
  78. 78. Cache API URL-addressable resources -----or ----- Indexed DB Other data
  79. 79. PUSHNOTIFICATIONS
  80. 80. 1. navigator.serviceWorker.register('sw.js') 2. .then(reg => { 3. return reg.pushManager.getSubscription().then(subscription => { 4. if (subscription) return subscription; 5. return registration.pushManager.subscribe({ 6. userVisibleOnly: true, applicationServerKey: appPubkey 7. }); 8. }); 9. }) index.html
  81. 81. 1. self.addEventListener('push', event => { 2. var payload = event.data ? event.data.text() : 'no payload'; 3. event.waitUntil( 4. registration.showNotification('WEATHER ADVISORY', { 5. body: payload, 6. icon: 'icon.png' 7. }) 8. ); 9. } sw.js
  82. 82. 1. self.addEventListener('notificationclick', event => { 2. event.notification.close(); 3. event.waitUntil(clients.openWindow('https://weather.app/advisory')); 4. } sw.js
  83. 83. PROGRESSIVEWEBAPPS ENWINDOWS
  84. 84. ¿COMOHACEUNUSUARIOPARAENCONTRAR UNAPROGRESSIVEWEBAPP?
  85. 85. AHORAMISMO:STORE&BING
  86. 86. PROGRESSIVEWEBAPPS ¿¡¿ENWINDOWSSTORE?!?
  87. 87. PWASENWINDOWSSTORE • Presentación activa
  88. 88. PWASENWINDOWSSTORE • Presentación activa • Ingestión Pasiva No hacer nada y Microsoft va a agregar tu PWA automaticamente * * Se puede no hacerlo usando robots.txt
  89. 89. PWAINGESTIONPROCESS(PASSIVE)
  90. 90. ANULANDOLAINGESTIÓNCONROBOTS.TXT
  91. 91. PWASIN THESTORE app.manifest popula la entrada: 1. name 2. description 3. icons 4. screenshots
  92. 92. DESDELAPERSPECTIVADELUSUARIO, UNAPWAVAASERUNAAPP.
  93. 93. ¡ANUESTROSUSUARIOSNOLES INTERESAQUETECNOLOGIAUSAMOS! Quieren usar nuestra app
  94. 94. UNAPWAESSUPERSIMPLEDEHACERY LOSBENEFICIOSSONIMPORTANTES.
  95. 95. BIT.LY/PWA-WORKSHOP-NETCONF Github: https://github.com/PWA-espanol/workshop
  96. 96. ¡MUCHASGRACIAS! @nbellocam 10/26/17 11423 al 27 de Octubre 2017.NET Conf UY v2017

×