#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
- Meetup: bit.ly/gdgneuquen
- Google+: bit.ly/gdgneuquenplus
- Facebook: facebook.com/gdgneuquen
- Twitter: @gdgneuquen
- Slack: gdgneuquen.slack.com
¿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
Slide: https://slides.com/gdgneuquen
Codelab PWA: https://codelabs.developers.google.com/codelabs/your-first-pwapp
Ejemplo PWA: http://bit.ly/doingpwa
Repo GitHub: https://github.com/googlecodelabs/your-first-pwapp
Slide GDG La Paz: http://slides.com/jvacx/pwa
Alejandro Castellano: http://www.alejandrocastellano.com/progressive-web-apps
Muchas Gracias!
- Meetup: bit.ly/gdgneuquen
- Google+: bit.ly/gdgneuquenplus
- Facebook: facebook.com/gdgneuquen
- Twitter: @gdgneuquen
- Slack: gdgneuquen.slack.com
PWA
By GDG Neuquén
PWA
Taller introductorio para conocer Progressive Web App - GDG Neuquen
- 7,078