Aplicaciones Web Progresivas

Codelab:
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es

Transcript

1. Aplicaciones Web Progresivas Alfredo Bonilla @brolag
2. Soy Alfredo Bonilla. Web Developer en Gorilla Logic. Co-organizdor de Angular Costa Rica. Colaborador en GDG Pura Vida. Quejas y sugerencias: @brolag
3. Cuota de mercado de sistemas operativos
4. El auge del Internet Móvil • Actualmente en Costa Rica hay más de 8,8 millones de líneas celulares, lo que implica que la penetración móvil llegó al 179% • Las suscripciones de Internet móvil crecieron 97,5%. Según Sutel 4,8 millones de usuarios están teniendo acceso a la Web a través de su celular. Periódico El Financiero, 2018
5. El Internet es maravilloso hasta que…
6. Pero puede ser peor…
7. … exacto, no pasa nada.
8. El costo de JavaScript
9. Mobile First • El mundo de JavaScript está a dieta. • Rendimiento optimizado. • Aplicaciones responsivas. • Experiencia offline.
10. ¿Qué son las PWA? Son aplicaciones web capaces de proveer al usuario una experiencia similar a una aplicación móvil nativa. Confiables Rápidas Atractivas
11. ¿Qué características tienen? • Alto rendimiento. • Funcionalidades offline. • Push notifications. • App Shell. • Icono en el escritorio. • Uso de características de dispositivo. • Actualizaciones automáticas.
12. ¿Por qué a mis clientes les interesa? • Incrementos en las tasas de conversión • Treebo, 4x. • Incrementos en el porcentaje de adquisición de usuarios. • Flipkart, 50% • Incremento en el tiempo invertido en el sitio • Pinterest, 44% • Incremento en los ingresos generados por usuario • Pinterest, 44%
17. ¿Qué tecnologías hacen esto posible? • Service Workers. • Web Manifesto. • Cache API. • Device APIs.
18. Service Worker • Un service worker es una secuencia de comandos que el 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.
19. Service Worker
24. Cache API • Es una interfaz que permite acceso a un mecanismo de almacenamiento por medio de “Request” y “Response”. Es parte de la especificación del ciclo de vida del Service Worker, sin embargo puede utilizarse por separado también • Existen varias estrategias de cache: • Red primero, cache después. • Cache primero, red después. • Solo cache. • Solo red. • Llamado asíncrono paralelo.
27. Web Manifesto • El manifiesto de aplicaciones web proporciona información sobre una aplicación (como nombre, autor, icono y descripción) en un documento simplificado. • Su principal propósito es crear aplicaciones web que se pueden instalar desde la pantalla principal de un dispositivo sin necesidad de hacerlo a través de una app.
29. 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
30. Demo https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ https://relaxed-wing-bf9167.netlify.com/ https://speakerdeck.com/brolag/aplicaciones-web-progresivas
31. ¿ Y los frameworks? • https://pwa-starter-kit.polymer- project.org/ • https://angular.io/guide/service- worker-getting-started • https://www.gatsbyjs.org/docs/p rogressive-web-app/
32. ¿ Y los CMS? • https://superpwa.com/ • https://www.drupal.org/project/ pwa
33. ¿Cómo iniciar? • https://developers.google.com/web/ • https://web.dev/ • https://www.udacity.com/course/mobile-web-specialist-nanodegree-- nd024 • https://s3.amazonaws.com/video.udacity- data.com/topher/2018/June/5b189f1e_mwsnd-syllabus-2.0.0/mwsnd-syllabus- 2.0.0.pdf • https://developers.google.com/training/certification/mobile-web- specialist/
34. Gracias @brolag