Save 37% off PRO during our Black Friday Sale! »

Progressive Web Apps con Angular

Progressive Web Apps con Angular

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

February 27, 2020
Tweet

Transcript

  1. PROGRESSIVE WEB APPS Alfredo Bonilla @brolag Co - Organizador @

    GDG Pura Vida Co - Organizador @ Angular Costa Rica Web Practice Lead @ Gorilla Logic # Q U E D A T E E N C A S A
  2. @brolag ¿Qué son las PWA? Confiables Rápidas Atractivas Son aplicaciones

    web capaces de proveer al usuario una experiencia similar a una aplicación móvil nativa.
  3. Alto rendimiento Funcionalidades offline Push notifications App Shell Icono en

    el escritorio Actualizaciones automáticas @brolag ¿Qué características tienen?
  4. @brolag ¿Por qué a nuestros clientes les interesa? Incrementos en

    las tasas de conversión Incrementos en el porcentaje de adquisición de usuarios Incremento en el tiempo invertido en el sitio Incremento en los ingresos generados por usuario
  5. @brolag ¿Por qué a nuestros clientes les interesa? Fuente: pwastats.com

  6. @brolag ¿Por qué a nuestros clientes les interesa? Fuente: pwastats.com

  7. @brolag ¿Por qué a nuestros clientes les interesa? Fuente: pwastats.com

  8. @brolag ¿Qué tecnologías se utilizan? Service Workers Web Manifesto API

    de Cache API de Notificaciones
  9. @brolag ¿Qué son los service workers? Un service worker es

    un script que tu navegador ejecuta en segundo plano, separado de una página web, abriéndoles la puerta a funciones que no necesitan una página web ni interacción de usuario.
  10. ¿Qué son los service workers?

  11. @brolag Prerequisitos para crear una PWA con Angular Usar las

    últimas versiones de Angular y Angular CLI Para que los service workers se registren el app se debe accesar utilizando HTTPS excepto cuando desarrollamos de manera local
  12. Chrome Firefox Edge Safari Opera UC Browser (Android version) Samsung

    Internet @brolag Navegadores Soportados
  13. @brolag ¿Cómo iniciar? ng add @angular/pwa --project *project-name* ng build

    --prod
  14. Angular Service Worker

  15. @brolag

  16. None
  17. Angular Web Manifest

  18. App Shell Fuente: developers.google.com @brolag

  19. App Shell @brolag ng generate app-shell

  20. Comunicación con Service Workers

  21. Forzar actualizaciones

  22. Otras cualidades de los Service Workers en Angular Integridad de

    recursos Permite configurar diferentes estrategias de registro con SwRegistrationOptions Fail-safe @brolag
  23. @brolag Chrome Dev Tools

  24. @brolag Lighthouse

  25. @brolag PWA Checklist HTTPS Páginas responsivas Todas las URL cargan

    sin conexión Metadata para agregar al escritorio Permite una carga rápida incluso en 3g Cross browser Transiciones fluidas
  26. @brolag Demo https://github.com/brolag/ng-honduras-pwa https://ng-honduras-pwa.firebaseapp.com/

  27. @brolag Recursos https://angular.io/guide/service-worker-intro https://web.dev/progressive-web-apps/ https://developer.mozilla.org/en- US/docs/Web/Progressive_web_apps

  28. PROGRESSIVE WEB APPS Alfredo Bonilla @brolag # Q U E

    D A T E E N C A S A Gracias por su atención