PWA (Progressive Web App): Nueva generación web

PWA (Progressive Web App)
NUEVA GENERACIÓN WEB
Carlos Ortega
@carlos_darko

@carlos_darko PWA (Progressive Web App): Nueva generación web
13% Webs mobile
87% Apps nativas
¿A qué dedica su tiempo un usuario medio al usar su móvil?

Ventajas de una app frente a una web mobile
Notificaciones Push con las que facilitar la vuelta de
los usuarios.
Iconos de escritorio que hacen más fácil tanto
recordar la app como el acceso a ésta.
Acceso nativo a cámara, geolocalización y otras
características nativas del dispositivo.
Posibilidad de funcionar, completa o parcialmente
sin conexión a Internet.

Desventajas de una app frente a una web mobile
El 80% del tiempo se usan las mismas 3 apps. El
resto pierden muchísima visibilidad.
Tienes que programar la app en 2 lenguajes
diferentes para poder estar en iOS y Android.
Necesita instalarse, lo que consume tiempo y
espacio en el dispositivo.
El contenido no puede ser rastreado por lo que no
es indexado por Google u otros buscadores.

¡Una PWA tiene lo mejor de las apps y lo mejor de las webs!
 Notificaciones Push
 Icono para escritorio
 Acceso a cámara, geolocalización…
 Usabilidad offline
 Alta visibilidad
 No necesita doble desarrollo
 No requiere instalación
 Puede ser rastreada por Google

Elementos característicos de una PWA
Application
Manifest
• Permite ‘instalar’
la PWA en el
escritorio
Service
Workers
• Sincronización en
segundo plano
• Cacheo /
usabilidad offline
• Permite funcionar
a otras
características
• Notificaciones
Push
Diseño
responsive
• Hace que el diseño
se vea
correctamente en
cualquier
dispositivo
API
Geolocalización
• Da acceso a la
ubicación del
usuario
Media API
• Da acceso a la
cámara y el
micrófono

Application Manifest - Características
 Se encarga de hacer nuestra web
‘instalable’. Define ciertos parámetros
de uso y diseño.
 Archivo en formato .json
generalmente nombrado ‘manifest’.
 Ubicado en la raíz del dominio o del
subdirectorio que quieras convertir
en PWA.
 No tiene por qué incluir todas las
propiedades existentes.

Application Manifest – Propiedades principales
•Muestra el nombre largo de la app (p.e. en splashscreen)“name”: “Cuentalia – Cuentos infantiles”
•Nombre corto (p.e. debajo del icono)“short_name”: “Cuentalia”
•Página a cargar al hacer click en el icono“start_url”: “/index.html”
•Conjunto de páginas incluidas en la experiencia PWA (generalmente toda la web)“scope”: “.”
•Define si la PWA debe parecer una app nativa o contener elementos del navegador“display”: “standalone”
•Color del fondo de pantalla en el splashscreen de carga inicial“background_color”: “#fff”
•Color principal (p.e. aparece en la barra superior al ver las apps activas)“theme_color”: “#3F51B5”
•Proporciona una descripción sobre qué trata la app“description”: “Ten siempre un cuento que leer a tus hijos”
•Indica el sentido de lectura, de izquierda a derecha o al revés“dir”: “ltr”
•Idioma principal de la app“lang”: “es-ES”
•Fuerza, prioriza o deja libertad a la hora de mostrar el contenido en vertical u horizontal“orientation”: “portrait-primary”
•Especifica la URL de los diferentes iconos y sus tamaños“icons”: […]

Application Manifest - Compatibilidad
Chrome ha sido el principal valedor de los app manifest hasta hace poco, pero desde finales de marzo, otros importantes
navegadores como Safari o Edge han comenzado también a dar soporte al formato. Parece claro que aunque aún hay alguna
ausencia importante como la compatibilidad con Firefox, las PWA’s vienen para quedarse y poco a poco todos los
navegadores están actualizándose para darles soporte.

Service Workers – Características
 Son JavaScripts que permanecen
activos en toda la web, y no sólo en la
URL que nos encontremos en ese
momento.
 Eso les permite reaccionar a
diferentes tipos de eventos en
cualquier momento (fetch, push,
sync…), incluso cuando la PWA está
cerrada.
 Debido a la naturaleza de los service
workers, donde controlas la conexión
del usuario, es imprescindible contar
con HTTPS en la web.

Service Workers – Ciclo de vida
Index.html App.js Sw.js Instalación Activación Espera Hibernación
CARGA
REGISTRA SIN EVENTOS
TRAS UN EVENTO

Service Workers – Posibilidades
Cacheo de los recursos de la página
Carga de la página sin conexión
Sincronización de datos en segundo plano
Envío de notificaciones Push
Geofencing

Requisitos para que el navegador muestre el banner de instalación
Recibir al menos dos visitas, con al menos cinco minutos entre ellas
Navegación a través de HTTPS
Un service worker registrado en la web
Un app manifest con:
Un ‘short_name’ (usado
en la pantalla de inicio)
Un ‘name’ (usado en el
banner)
Un icono de 192x192
Una ‘start_url’ con la
página a cargar de inicio

Con las PWA’s, las posibilidades mobile se multiplican

EXTRA: ¡Convierte tu Wordpress en una PWA en 5 minutos!
Instalando el plugin gratuito ‘Super
Progressive Web Apps’, podemos convertir
cualquier web realizada en Wordpress en
una PWA en pocos minutos.
Sólo necesitaremos definir el nombre, la
descripción, el logo y color principal. Como
extra, puedes también decidir si quieres o
no forzar la vista en vertical u horizontal.
Con esto la web ya será instalable y
cumplirá como PWA a todos los efectos,
aunque si queremos disponer de
notificaciones push tendremos que instalar
también el plugin OneSignal.

EXTRA: ¡Convierte tu Wordpress en una PWA en 5 minutos!

PWA (Progressive Web App): Nueva generación web

Más contenido relacionado

La actualidad más candente (18)

Similar a PWA (Progressive Web App): Nueva generación web (20)

Último (20)

PWA (Progressive Web App): Nueva generación web