Qué es una Progressive Web App y cómo crear una en WordPress

¿Has oído alguna vez el término Progressive Web App? Hoy veremos qué son las PWA o Progressive Web Apps, qué les diferencian de las apps que solemos tener en nuestros teléfonos móviles o tablets y qué tienen de especial.

A decir verdad, lo que conocemos hoy por Progressive Web App o aplicaciones web progresivas no es una tecnología nueva, pero es algo que en el mundo del posicionamiento web está dando mucho que hablar.

¿Qué es una aplicación web?

Al igual que existen aplicaciones para Windows, Mac, Android o iOS, también existen aplicaciones que no dependen de un sistema operativo, sino que son como una web. Es decir, se pueden ver desde cualquier navegador.

Por ejemplo, las páginas web de redes sociales como Twitter y Facebook son web apps. A través de la web puedes hacer prácticamente lo mismo que con las aplicaciones que usas en Android o iOS con la ventaja de que no tienes que instalar nada.

Ventajas de las PWA

Las ventajas que tienen las Progressive Web App son bastantes. A continuación vamos a enumerar cuáles son:

1. Accesible sin conexión

Una Progressive Web App debe ser accesible tanto con conexión como sin conexión.

2. Instalable

Una PWA debe ser una web que se pueda instalar en nuestros dispositivos añadiendo su icono y nombre en el escritorio como si fuese una app más. Esto mejorará sobre todo la inmediatez de acceso en futuras visitas y la experiencia de usuario.

3. Se actualiza automáticamente

No será necesario estar pendiente de futuras actualizaciones para descargarlas. Las PWA se actualizan automáticamente y en segundo plano. Por lo que cualquier modificación o nuevo elemento de la web, podrá verse reflejada en la app.

4. Notificaciones push

Una de las funciones que ha heredado de las apps es la posibilidad de mandar notificaciones Push al móvil incluso sin tener la PWA abierta. Por lo que, por ejemplo, podremos avisar a los usuarios de nuevos artículos en nuestra web.

5. Enlazable

Una de las grandes ventajas frente a las apps es que todas las URL’s son perfectamente enlazables y fáciles de compartir.

Elementos imprescindibles de una progressive web app

Ahora que ya sabemos qué es y lo que puede hacer una Progressive Web App, vamos a ver cuáles son los diferentes elementos principales que nos vamos a encontrar en cualquier PWA.

Application Manifest

Este es un elemento imprescindible en una Progressive Web App. El application manifest es un archivo en formato .json en el que tendremos que definir las características estéticas y de usabilidad de nuestra web app como por ejemplo:

• Nombre
• Icono que se mostrará cuando sea instalada
• Página de inicio
• Color principal
• Si preferimos que sea visualizada en vertical u horizontal
• Si queremos que se vean más o menos elementos del navegador al navegar por ella
• Una breve descripción sobre qué trata la web
• El idioma principal

Service Worker

El Service Worker es otro de los elementos imprescindibles. Es el motor de una PWA y el elemento principal que aporta la mayoría de sus características. Un Service Worker es un JavaScript que no actúa únicamente en una URL, sino que actúa en toda la web. Una vez que entramos en una Progressive Web App, se registra y activa, quedando activo en segundo plano entre el usuario y el servidor.

Este elemento reacciona a diferentes eventos que le puedan llegar tanto desde el servidor como del usuario. Estas peticiones pueden ser de distintos tipos:

• Fetch: Peticiones del usuario para descargar elementos del servidor.
• Push: Peticiones del servidor para enviar notificaciones al usuario.
• Sync: Sincronización de datos.

Según la petición recibida, el Service Worker activará diferentes funciones. Por ejemplo, cacheo, sincronización en segundo plano, notificaciones push, etc….

Algo que hay que tener en cuenta, es que los Service Worker capturan mucha información comprometida por lo que la navegación debe ser segura. Es decir será necesario tener instalado un certificado SSL para asegurar una navegación cifrada y segura.

Diseño responsive

Aunque hoy en día parece que es algo que debería estar ya en todas las casas, aún se ven páginas web que no se adaptan a los teléfonos móviles. Si estamos hablando de hacer una app, lógicamente ésta se tendrá que adaptar a cada dispositivo. Por lo que es un requisito fundamental.

Además de estos elementos también podemos incorporarle funcionalidades que necesiten pedir autorización de geolocalización o incluso de funcionalidades multimedia de los dispositivos. En estos casos tendremos que usar una API de geolocalización y una API media respectivamente.

Cómo convertir nuestro WordPress en una Progressive Web App

Existen muchos plugins para convertir nuestra web en una PWA. Personalmente he probado dos que son los que voy a comentar a continuación.

AMP for WP

Este plugin fue creado para hacer que tu web tuviese la tecnología AMP. Recientemente han añadido la funcionalidad de PWA. Aunque es muy fácil de usar, nos obliga a crear una cuenta en Firebase para poder acceder a los datos necesarios para que muestre el aviso de instalar la aplicación en nuestra pantalla de inicio.

SuperPWA

Sin duda creo que es el mejor plugin para convertir tu web en una PWA. Es fácil e intuitiva y no necesitas usar firebase ya que el propio plugin se encarga de crear todos los documentos y archivos necesarios. La única funcionalidad que le falta es la del envío de notificaciones push.

Sin embargo, utilizándola junto con One Signal podemos suplir esa carencia. De hecho los desarrolladores han aclarado que no han añadido esa funcionalidad porque el propio plugin One Signal es el mejor en este ámbito. Esto nos asegura que son compatibles al 100%

Como ves las Progresive Web App son una evolución hacia el mundo mobile. Y tú, ¿piensas hacer de tu web una PWA?