#doingPWA

Que es un GDG?

  • Google Developer Groups
  • Comunidad Independiente que agrega valor a la comunidad Desarrolladores Local en función de sus necesidades.
  • A través eventos presenciales, online

Quienes Somos

GDG Neuquén es una comunidad de Desarrolladores que esta interesada en la Tecnología de Google (Android, Cloud, Drive, Google APIs, etc), con la idea de compartir, sumar, crecer juntos.

 

 

Disclaimer: GDG Neuquén es un grupo independiente; las actividades del grupo y opiniones expresadas no representan las de Google Inc.

Como Sumarse

  • Miembro Activo
  • Organizador

Vias de Contacto y Comunicación

¿Que es PWA?

Son aplicaciones webs progresivas que se caracterizan por mejorar la experiencia de usuario en los dispositivos móviles.

Pese a ser webs intentan que la experiencia de usuario sea igual de buena que en una app nativa. Y esto se logra utilizando estándares de desarrollo web, algunos ya conocidos como HTML, CSS y javaScript; y una nueva generación de APIs de javaScript aplicando nuevos conceptos en el diseño de webs para dispositivos móviles.

Aprox. el 58% de la gente que se conecta a internet lo hace desde su móvil

Número de usuarios de smartphone en el mundo

40%

Abandona un sitio si tarda más de 3 segundos en la carga inicial

En las tiendas existen 82% de apps zombies

Cada paso antes de poder usar una app hace que perdamos un 20% de usuarios

Abrir la tienda de apps                            1000

67% de llegada (dinero) perdidas

Buscar la app en la tienda                         800

Click en instalar                                           640

Esperar la descarga                                    512

Aceptar los  permisos                                410

Usar y esperar que guste                          328

Abrir el URL de la APP                           1000

100% de llegada!

¿Que pasaría si nuestra app fuese web?

Entonces... Por qué PWA?

  • Experiencia que combina lo mejor  de la web apps y de las mobile apps.
  • Es full utilizable desde la primera carga en el navegador.
  • No requiere instalación.
  • A medida que el usuario interactúa con la app esta se vuelve más poderosa.
  • Carga más rápido, incluso en conexiones super lentas.
  • Envía push notifications.
  • Desde el icono creado en el escritorio podemos tener una experiencia full screen.

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Funciona para todos los usuarios, sin importar el navegador que estén usando. Se construyen en torno al paradigma de progressive enhancement (mejora progresiva).

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Se cargan rápidamente, independientemente del tipo de conexión a Internet

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Velocidad y suavidad en las transiciones, con el scroll y durante la navegación. Pero hay que tener presente que esto dependerá del navegador que se esté utilizando

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Utilizan el protocolo https para asegurar la integridad del contenido ofrecido.

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Se pueden enviar notificaciones push a los usuarios.  Esta característica es la que les permite venderse como que son apps que permiten el “engagement” (participación del usuario)

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Se ajustan a cualquier form factor (desktop, mobile, tablets, lo que el futuro traiga). Incluye material design.

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Utilizando Service Workers, pueden operar en modo offline o en redes con una conexión de baja calidad. Utilizan paradigma "offline first"

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Gracias a los procesos en background (Service Workers) el contenido se mantiene actualizado. Estos procesos aprovechan los momentos que hay conexión para actualizar los contenidos.

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Son consideradas “apps” para los buscadores. Pueden ser encontradas gracias a los W3C Manifests y al scope de registración de los Service Workers.

Propiedades de las PWA

  • Progresivas
  • Carga instantánea
  • Rapidez
  • Seguridad
  • Notificaciones Push
  • Responsive
  • Icono
  • Independientes de la conexión
  • Contenido siempre actualizado
  • Indexables como apps
  • Linkables

Al tratarse de páginas web pueden enlazarse fácilmente a través de su URL y no es necesario que se descarguen de una tienda de apps.

Propiedades de las PWA

Todas las características son gracias a dos conceptos:

  • Service Worker
  • App Shell

Service Worker

Es un script que corre en background en tu navegador web de manera independiente de la página web y que permite que se realicen tareas que no requieren la interacción del usuario

  • Sólo un archivo JS.
  • Corto tiempo de vida, se despierta solo cuando es necesario.
  • Responde a eventos (ej: network requests, push)
  • Conjunto limitado de API
    • Cache
    • Fetch (comunica el server con la app)
    • IndexedDB
    • Notificationes
  • No puede acceder al DOM directamente.
  • Se debe mostrar a través de HTTPS.

Service Worker

Es un proxy (que tú controlas) entre el navegador y el servidor. Le puedes decir de que manera responder a las peticiones, sin llegar al servidor, puede interceptar las peticiones, delegarlas al servidor, o rechazarlas... lo que quieras.

App Shell

Permite guardar en caché de manera separada la interfaz de usuario del contenido de la web app y, por tanto, permitir la carga rápida cuando el usuario accede de nuevo a la web.

Otras Características

  • Web Payments
  • Credentials API
  • Y muchas librerias JS más...

}

One tap  sign in

PWA en Acción

Sin conexión

Lie (mentira) Fi

solo 200 ms más lento

App Nativa Vs PWA

500 ms más rápido

App Nativa Vs PWA + Caché

Links & Referencias

Muchas Gracias!

PWA

By GDG Neuquén

PWA

Taller introductorio para conocer Progressive Web App - GDG Neuquen

  • 7,046