PWA: Web app con super poderes

Transcript

1. PWA: Web Apps Con Super Poderes
2. Web Practice Lead Co-Organizador de Angular Costa Rica Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez @malvarezcr
3. Progressive Web Apps
4. Progressive Web Apps
5. ¿Que hace un Web App un PWA? “Progressive Web Apps provide an installable, app-like experience on desktop and mobile that are built and delivered directly via the web”
6. ¿Que hace un Web App un PWA? • Responsive • Connectivity-independent • Feel like a native app (fast loading) • Always up-to-date (fresh from the web; no updates from the app store) • Safe (https) • Discoverable (search engines) • Linkable (Share) • Installable (home screen, cache data) • Re-engageable (home screen, push notifications)
7. ¿Beneficios de los PWAs? • Mejora el tiempo de carga • Experiencia más nativa • “Cacheo” de datos • Disminuye la descarga de datos • Re-engaging del usuario
8. Casos de uso exitosos
9. PWA • Tiempo de carga • Experiencia de usuario • Costo de desarrollo • Visibilidad en buscadores • Consumo de bateria • Monetización • Visibilidad en App Store / Play Store • Seguridad Native vs
10. Soporte de Browsers
11. Soporte de Browsers - Service Worker
12. Soporte de Browsers - Service Worker
13. Arquitectura App-Shell
14. Arquitectura App-Shell
15. ¿Que necesitamos para un PWA? • Web Manifest • Service Worker • Metadata • HTTPs
16. Web Manifest
17. ¿Que es un Service Worker? “Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available).”
18. Ciclo de vida Service Worker
19. Registrar Service Worker
20. Estrategias de “Caching”:
21. Service Worker Basico
22. Lighthouse
23. Workbox
24. ⚡Demo
25. Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter @angularcr
26. Links de referencia • Ejemplo Github https://github.com/mahcr/your-first-pwapp • Documentacion PWAs https://developers.google.com/web/progressive-web-apps • Workbox https://developers.google.com/web/tools/workbox • Twitter: @malvarezcr / Medium: @mahcr Mariano Álvarez