Slide 1

Slide 1 text

Aplicaciones Web Progresivas Alfredo Bonilla @brolag

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Cuota de mercado de sistemas operativos

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

El Internet es maravilloso hasta que…

Slide 6

Slide 6 text

Pero puede ser peor…

Slide 7

Slide 7 text

… exacto, no pasa nada.

Slide 8

Slide 8 text

El costo de JavaScript

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

¿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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

Service Worker

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Gracias @brolag