Progressive Web Apps con Angular

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Alto rendimiento Funcionalidades offline Push notifications App Shell Icono en el escritorio Actualizaciones automáticas @brolag ¿Qué características tienen?

Slide 4

Slide 4 text

@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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@brolag ¿Qué tecnologías se utilizan? Service Workers Web Manifesto API de Cache API de Notificaciones

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

¿Qué son los service workers?

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

Chrome Firefox Edge Safari Opera UC Browser (Android version) Samsung Internet @brolag Navegadores Soportados

Slide 13

Slide 13 text

@brolag ¿Cómo iniciar? ng add @angular/pwa --project *project-name* ng build --prod

Slide 14

Slide 14 text

Angular Service Worker

Slide 15

Slide 15 text

@brolag

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Angular Web Manifest

Slide 18

Slide 18 text

App Shell Fuente: developers.google.com @brolag

Slide 19

Slide 19 text

App Shell @brolag ng generate app-shell

Slide 20

Slide 20 text

Comunicación con Service Workers

Slide 21

Slide 21 text

Forzar actualizaciones

Slide 22

Slide 22 text

Otras cualidades de los Service Workers en Angular Integridad de recursos Permite configurar diferentes estrategias de registro con SwRegistrationOptions Fail-safe @brolag

Slide 23

Slide 23 text

@brolag Chrome Dev Tools

Slide 24

Slide 24 text

@brolag Lighthouse

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

@brolag Demo https://github.com/brolag/ng-honduras-pwa https://ng-honduras-pwa.firebaseapp.com/

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

PROGRESSIVE WEB APPS Alfredo Bonilla @brolag # Q U E D A T E E N C A S A Gracias por su atención