Progressive Web Apps con Angular

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
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