Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Aplicaciones Web Progresivas

Aplicaciones Web Progresivas

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

October 11, 2019
Tweet

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%
  13. None
  14. None
  15. None
  16. None
  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

  20. None
  21. None
  22. None
  23. None
  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.
  25. None
  26. None
  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.
  28. None
  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