PWA Progressive Web App o cómo convertir tu web en una app sin dejar de ser una web

4 minutos

El eterno dilema, mi web o mi app o las dos cosas. Si bien es cierto que hoy todas las webs son tipo responsive (adaptables a cualquier dispositivo), y si no lo son deberían serlo, tener una app es sinónimo de avance, de estar al día.

¿Pero nos hemos preguntado si es posible que mi web funcione en desktop como una web y en móviles / tablets como una app?. Pues sí, es posible y muy fácil, convirtiendo tu web a PWA Progressive web app, o mejor dicho, adaptando tu web de manera progresiva convirtiéndola en una “casi” app pero manteniendo su potencia web, o mejor dicho, aprovechando lo mejor de tener una web y lo mejor de tener una app todo en uno.

Contenidos del post

1 Una web PWA debe cumplir 3 máximas, siempre según Google:
2 APIs que tenemos que instalar y otros elementos obligatorios para que funcione nuestra PWA
3 ¿Casos de éxito de PWA reales?,

Una web PWA debe cumplir 3 máximas, siempre según Google:

– Ser fiable, es decir, que se pueda ver sin conexión.

– Ser rápida, debe cargar al instante, como una app, y debe de responder óptimamente a cualquier interacción por parte del usuario: un tap en algún botón, o poder deslizar cualquier página sin que se pare tanto vertical como horizontalmente si la web lo permite, etc.

– Que enganche, es decir, que nos atrape con los ojos, que su aspecto o look & feel sea el de una app 100%, que su navegación sea el de una app.

Además debe ser “instalable”, es decir que podamos descargar por algún método (código bidi, enlace, …) nuestra “app” en un smartphone con una ventaja adicional, no ocupa espacio en el móvil dado que en realidad es una web alojada en un servidor.

También actualizable…, claro claro, pero es que ya se actualiza desde la propia web, por tanto no hay que estar pendiente de descargar futuras actualizaciones, otra ventaja.

Todas son accesibles sin conexión y esto es gracias al precacheo, es decir que si vamos en el AVE y nos metemos en un túnel no tendremos problemas para seguir en la app.

Fundamental es el aspecto “nativo-app”, nos tiene que permitir no visualizar en el móvil ningún elemento de navegación que sea como el de la web, y por supuesto tenemos que poder enviar notificaciones push a los usuarios que la hayan “instalado” en sus dispositivos, aún cuando la app esté cerrada en el móvil.

APIs que tenemos que instalar y otros elementos obligatorios para que funcione nuestra PWA

Service Worker

es el motor de nuestra PWA que hace que nuestra web se transforme y aparezca como una app en los móviles y se comuniquen usuarios y servidor en segundo plano, siempre está activo y es lo que provoca que podamos generar “eventos de nuestra PWA en los dispositivos móviles:

Push: notificaciones desde el servidor al usuario.
Fetch: descarga de elementos de la web a petición del usuario.
Sync: Sincronizar los datos de un lado y del otro.

Application Manifest

Es un archivo en el que se definen las características básicas de nuestra PWA. Application manifest es un archivo .json que contiene:

el nombre de la web
La página de inicio
El icono de la app
El color de principal de la app
Tipo de orientación preferida de la app
Qué va a contener el navegador
El idioma por defecto
Descripción de la app, de qué se trata nuestra web

API de geolocalización

imprescindible si queremos geoposicionar al usuario

API Media

necesaria para tener acceso a cámara, micro, etc. del dispositivo móvil.

No nos olvidemos que el diseño de la web debe de ser responsive, es básico para que podamos adaptar nuestra web a PWA.

Parece que esta nueva “feature” para nuestras webs ha llegado para quedarse y todo va cumpliendo la premisa de #mobilefirst. Si bien es cierto que lleva en el mercado desde 2014, este año 2018 es en el que más repercusión está teniendo.

Obviamente ya existen plugins para las web montadas en WordPress como SUPER PROGRESSIVE WEB APPS, WP-AppKit – Mobile apps and PWA for WordPress, Progressive WordPress (PWA), WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps… incluso para tiendas online montadas con Woocommerce PWACommerce – WooCommerce Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps, pero parece que es demasiado nuevo todo esto para que las adaptaciones de las webs a PWA sean masivas.