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