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.

Globant development week / Progressive Web Apps

49 views

Published on

Diferencias y usabilidad de App Web y App Nativa.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Globant development week / Progressive Web Apps

  1. 1. Progressive Web Apps ¿Y eso con qué se come?
  2. 2. Diego Coy Difundir conocimiento en tecnologías modernas ● Angular Colombia ● GDG Bogotá ● Facebook Developers Circle Bogotá ● WTM Bogotá ● Mentoría en tecnología para startups @unJavaScripter Gestor de comunidades | Desarrollador Google Developer Expert && Microsoft MVP diegocoy.com
  3. 3. Question Friendly Talk Aprovechen que es gratis y pregunten todo lo que quieran ⚠
  4. 4. “App-like experience” Aplicaciones (sitios) web que en un dispositivo móvil ofrecen una experiencia similar a la de una aplicación nativa
  5. 5. Aplicaciones Nativas ☺ Fácil acceso (una vez instaladas) ☺ Contenido disponible siempre * ☺ Contacto (engagement/re engagement) con el usuario ☹ Métodos de distribución limitados (tiendas)
  6. 6. Instalación de una app nativa
  7. 7. 6 Interacciones
  8. 8. Métodos de distribución en la web Manual: Enlace: Mi Aplicación web
  9. 9. Abrir el navegador Algo me motivó a acceder a la aplicación y debo entrar a su sitio web usando el navegador de mi teléfono Total de interacciones: 1
  10. 10. Escribir la dirección web (URL) Escribo la URL de la aplicación web que deseo visitar Total de interacciones: 3
  11. 11. Esperar... Espero a que se complete la carga de la aplicación Total de interacciones: 3
  12. 12. Disfrutar En este momento ya puedo usar la aplicación web Total de interacciones 3
  13. 13. App Web ☺ App Nativa ☹ Esta es la gran ventaja que tienen las aplicaciones web en comparación a las aplicaciones nativas
  14. 14. La Web ● Abierta ● Escala global ● Cualquier dispositivo* ● Experiencia de uso compartido ● Accesible * Con un navegador web
  15. 15. Responsiveness Que el contenido se desparrame en la pantalla
  16. 16. Acceso desde cualquier tamaño Desde un teléfono, hasta lo que traiga el futuro. La aplicación debe ser funcional en todos los casos. Animación: Karol Podleśny https://dribbble.com/shots/1277779-Morphing-devices-GIF
  17. 17. La seguridad ante todo
  18. 18. letsencrypt.org
  19. 19. PWA
  20. 20. ● Fast ● Integrated ● Reliable ● Engaging
  21. 21. Progressive enhancement El contenido es el núcleo de las aplicaciones, el resto se agrega de a poquitos si se puede
  22. 22. Roscón Toda app moderna puede representarse en un roscón
  23. 23. Acceso directo en el escritorio Aplicaciones a un tap de distancia
  24. 24. Nos ganamos un espacio en el <3 y el escritorio de nuestros usuarios Web App install banner
  25. 25. manifest.json Lo referenciamos desde el archivo index.html de nuestra aplicación: <link rel="manifest" href="manifest.json"> Pro tip: Agregar la propiedad “scope” https://developers.google.com/web/fundamentals/web-app-manifest
  26. 26. Instalación manual desde Chrome 68 https://developers.google.com/web/fundamentals/ap p-install-banners/
  27. 27. Dinosaur mode!
  28. 28. La experiencia Offline Controlada por el navegador
  29. 29. Service Worker al rescate
  30. 30. Service Worker ¡Un proceso que siempre está activo y que tiene muchos superpoderes! ● Offline ● App install ● Notificaciones push * Sólo funciona si el sitio está siendo cargado desde HTTPS
  31. 31. Service Worker Registro if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('Registration successful'); }) .catch(function(error) { console.log('Service worker registration failed:', error); }); }
  32. 32. Service Worker Fetch Caching Files with Service Worker https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker // El "handler" más básico para fetch slef.addEventlistener('fetcn', event => { event.respondWith(fetch(event.request)); }); // ... // Devolviendo lo que se encuentre en cache // Y si no hay, ahí sí mando la solicitud a Internet self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); }); // ...
  33. 33. Demo airhorner.com
  34. 34. Workbox https://developers.google.com/web/tools/workbox/
  35. 35. PWA Toolkit Ionic + Stencil
  36. 36. PWA Starter Kit Web Components ~ Polymer
  37. 37. Notificaciones Push
  38. 38. Notification API Push API https://developers.google.com/web/fundamentals/push-notifications/display-a-notification self.addEventListener('push', function(event) { const title = 'Credit Card'; const options = { body: event.data.text(), icon: 'images/icon.png', badge: 'images/badge.png' }; event.waitUntil(self.registration.showNotification(title, options)); });
  39. 39. Chicanear time
  40. 40. Lighthouse https://developers.google.com/web/too ls/lighthouse/
  41. 41. Desktop/ chrome/ spotify //...
  42. 42. Microsoft Store
  43. 43. Desktop PWAs Chrome OS Linux, Windows, MacOS en camino https://developers.google.com/web/updates/2018/05/dpwa
  44. 44. https://jakearchibald.github.io/isserviceworkerready/
  45. 45. https://youtu.be/NITk4kXMQDw?t=6m37s
  46. 46. Links ● Chrome: Progressive Web Apps ● Caching Files with Service Worker ● Displaying a notification The Web App Manifest ● Let’s Encrypt ● Lighthouse ● Workbox ● PWA Toolkit ● PWA Starter Kit ○ Repo ○ Charla (se van a enamorar) ● Progressive Web Apps in the Microsoft Store ● Desktop PWAs ● Is ServiceWorker Ready Yet? Gente para seguir: ● Yutub ○ Chrome Developers ● Twister ○ @jaffathecake| ○ @DasSurma ○ @gauntface ○ @sw12 ○ @petele ○ @paul_irish ○ @notwaldorf ○ @ChromeDevTools ○ @ChromiumDev ○ @____lighthouse
  47. 47. Que gracias *Aplausos*

×