Aplicaciones Web Progresivas Alfredo Bonilla @brolag

Soy Alfredo Bonilla. Web Developer en Gorilla Logic. Co-organizdor de Angular Costa Rica. Colaborador en GDG Pura Vida. Quejas y sugerencias: @brolag

Cuota de mercado de sistemas operativos

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

El Internet es maravilloso hasta que…

Pero puede ser peor…

… exacto, no pasa nada.

El costo de JavaScript

Mobile First • El mundo de JavaScript está a dieta. • Rendimiento optimizado. • Aplicaciones responsivas. • Experiencia offline.

¿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

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

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

No content

No content

No content

No content

¿Qué tecnologías hacen esto posible? • Service Workers. • Web Manifesto. • Cache API. • Device APIs.

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.

Service Worker

No content

No content

No content

No content

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.

No content

No content

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.

No content

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

Demo https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ https://relaxed-wing-bf9167.netlify.com/ https://speakerdeck.com/brolag/aplicaciones-web-progresivas

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

¿ Y los CMS? • https://superpwa.com/ • https://www.drupal.org/project/ pwa

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

Gracias @brolag