La tecnología evoluciona día a día a pasos agigantados y si hablamos del entorno móvil los cambios son todavía más rápidos. Todos llevamos un smartphone en nuestro bolsillo con probablemente varias decenas de aplicaciones para distintas funciones: entretenernos, mantenernos en contacto, ser más eficientes, trabajar, hacer la compra, buscar inspiración…

Además, cada vez son más las empresas que buscan subirse al tren de contar con su propia App móvil para que sus clientes y fans puedan acceder a su contenido de la forma más rápida y facilitar la conversión según sus objetivos. En este contexto, surgen soluciones como las PWA (Progressive Web Apps), la unión perfecta entre el universo Web y el universo App.

¿Qué son las PWA’s?

En términos sencillos las Progressive Web Apps aúnan las ventajas de las Apps y de las webs en una misma aplicación. Cargan rápido y no requieren descarga.

Como su nombre indica, Progresivas por su capacidad de incrementar sus funcionalidades. Web, por la forma en la que están programadas. Y por último, App por comportarse como una app nativa.

Apps nativas vs. Progressive Web Apps

Parecen lo mismo pero no lo son. Como hemos comentado en su definición, las PWA tienen lo mejor de cada mundo, por lo que las ventajas como notificaciones push, acceso rápido desde el escritorio, visibilidad en las app stores también las encontramos en las Progressive Web Apps. Pero sobre todo y a lo que la mayoría de las empresas les preocupa, son los costes, los costes de desarrollar una App nativa son mucho más altos, principalmente por la complejidad del desarrollo.

Ventajas de las Progressive Web Apps

Hay muchas ventajas de usar esta nueva tecnología frente al desarrollo de una app o una web.

1. Costes

Desarrollar una Web Progressive App es mucho más económico que desarrollar una web nativa ya que el desarrollo de éstas es prácticamente el mismo que el desarrollo de una web. Mientras que el desarrollo de una App es mucho más complejo y por lo tanto, costoso por el alto nivel técnico que requiere.

Según publica Lance Talent en su blog, los costes medios de desarrollar una App son los siguientes:

App básica sobre 3.000€
App con BBDD entre 5.000€ y 30.000€
Juego: entre 7.000€ y 150.000€

2. Velocidad

Tienen una carga inicial más rápida que una web y aún más rápidas en las siguientes visitas gracias al service worker, que posteriormente explicaremos. La velocidad de carga es el principal factor de UX según un estudio realizado por Erixsson Mobility. El 53% de los usuarios abandona una web si la carga tarda más de 3 segundos. Por su naturaleza la velocidad mejora con las PWA frente a una web normal y si lo combinamos con tecnologías AMP casi es capaz de volar.

3. Programadas con JavaScript

Esto es una gran ventaja, ya que este lenguaje es el más utilizado por los programadores. Apareció en 1995, está presente en la mayoría de aplicaciones y servicios web que más utilizamos como Facebook, Twitter y Gmail. Open Source, código abierto y reutilizable, esto permite que esté siempre en un constante proceso de mejora y disminuye la posibilidad de cometer errores.

4. Fiables

Desde que iniciamos la navegación en una PWA nunca nos aparecerá el mensaje para indicarnos que la red es lenta. El service worker permite que el contenido se le muestre al usuario de forma rápida transmitiendo sensación de confianza.

5. Sin instalación

Creando un acceso directo desde el escritorio, las Progressive Web Apps ofrecen una experiencia igual que una app nativa pero sin la necesidad de ocupar esa memoria que tanto necesitamos para las actualizaciones continuas de nuestros dispositivos (sobre todo si eres de IOS).

6. Notificaciones push

Permite notificaciones push, una de las ventajas extraídas de las Apps. El navegador informará al usuario de las notificaciones recibidas y crearemos una posible nueva interacción entre el usuario y nuestra web.

7. Aumento de conversión/ventas

Estas PWA no requieren de check out, por lo que el problema de pérdida de usuarios en medio del proceso de compra lo eliminamos. El estudio realizado por Google de Aliexpress al realizar el cambio hacia una PWA mejoró en el ratio de conversión de usuarios nuevos en un 104%. Bien es cierto que esta función no la soportan todos los navegadores, pero la buena noticia es que Google sí.

Service Worker: la magia de las Progressive Web Apps.

En términos técnicos el Service Worker es una secuencia de comandos que tu navegador ejecuta en segundo plano, separado de una página web, abriendo la puerta a funciones que no necesitan una página web ni interacción de usuario.

En términos humanos, el service worker es el controlador/intermediador entre el navegador y el servidor. Aquí podemos encontrar dos tipos de funciones por parte del service worker:

Primera carga. Si la interacción no se ha producido antes, el navegador hace la petición al servidor y carga la página, pero el service worker se encarga de mandar los recursos a la caché por si el usuario los vuelve a necesitar.
Segunda carga. Esto se produce cuando el usuario vuelve a navegar por la misma sección que ya ha navegado. Gracias al service worker el servidor no vuelve a cargar los datos, sino que directamente va a la caché y muestra la información incluso sin necesidad de estar conectado a internet.

¿Mejora el posicionamiento usar una PWA?

No por pasar tu web a PWA vas a tener 1.000.000 de visitas. Las PWA recordamos que tratan de unir lo mejor del mundo Web y del mundo App. Por lo que le estamos dando al usuario las buenas prácticas de cada una de las partes, si todas estas funcionalidades las implementamos de la forma adecuada, conseguiremos mejorar la experiencia del usuario en la web y con esto seguramente consigamos mejorar nuestras palabras clave posicionadas si tienes una estrategia de posicionamiento planteada.

Tenemos que seguir una serie de buenas prácticas para que Google indexe de la forma adecuada nuestra PWA.

Las etiquetas SEO (canonicals, href lang, rel=amphtml, status http…) se deben de cargar en el html para la primera indexación que realiza Google.
Cargar el contenido relevante que queremos que Google tenga en cuenta antes de 5”. Ya que todo lo que tarde más de este tiempo Google no lo tendrá en cuenta.
Testear y pasar por herramientas de renderizado para detectar problemáticas.

Ejemplos de PWA

Si estás leyendo este artículo desde tu móvil y quieres ver en directo buenos ejemplos de PWA’s, te invitamos a hacer la prueba accediendo a estos reconocidos portales. Seguro que en algún punto llegas a dudar de si estás en una App o sigues en el navegador del móvil: