¿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?
11 comentarios en «Qué es una Progressive Web App y cómo crear una en WordPress»
Hola como estan… me gusto muchismo su articulo… de gran ayuda… quisiera preguntarles si tienen ejemplos de sitios que sean Wordpress y ya se han adaptado a PWA…. y si tambien con estos sitios se crea el atajo en escritorio del movil…??
Muchas Gracias.
Hola Camilo, pues probé con este mismo blog a tenerlo en pwa y al final lo quité porque no noté grandes cambios y el hecho de tener más mensajes en forma de popup además de el de cookies y las redes sociales me parecía que dañaba a la experiencia de usuario. Sin embargo, el blog de mi amigo miposicionamientoweb.es actualmente está disponible en PWA.
Por otro lado para que se cree el atajo en el escritorio del móvil, tienes que darle a añadir a página de inicio cuando sale el aviso.
Muchas gracias por animarte a comentar.
Un saludo!!
Hola Roberto, me ha parecido muy útil tu post sobre las PWA. Me ha surgido una pregunta al querer instalar el plugin Super PWA, ¿Es compatible con la última versión de Wordpress? He visto que no se actualizó tras la versión 5.0 de Wordpress.
Un saludo y gracias!
Hola Miguel, pues sinceramente no tengo ni idea porque dejé de usarlo hace un tiempo puesto que no vi una gran mejora en el SEO de mi web. De todas formas, en la información del plugin pone que el último testeo se ha hecho con la versión 5.1.2, por lo que debe funcionar correctamente. Prueba a instalarlo haciendo antes una copia de seguridad por si te diera algún problema, pero en principio no tendría que darte ninguno.
Buenas tardes, amigo tengo una pregunta.
Yo tengo una PWA y quisiera convertirla en una web en wordpress.
Puedes ayudarme con eso? hay algun foto o algun escrito donde puedan explicarme eso?
Hola Yohander, pero ¿con qué está hecha esa web? Una PWA es una web convertida en app.
Un saludo!
Hola,
Me gustaría convertir una tienda online con Woocomerce en PWA.
¿Sabes si Super PWA es compatible y funciona bien con Woocommerce?
O en este caso igual sería mejor utilizar algún plugin específico para Woocommerce…
Muchas gracias!!
Hola Abel, sinceramente no tengo ni idea porque no lo he probado. De todas formas creo que es totalmente compatible. Así todo, haz siempre una copia de seguridad antes de instalar el plugin.
Un saludo!!
hola te hago una consulta, porque no entiendo bien como queda mi sitio web con PWA en un celular, se puede obtener un APK con PWA no comprendo .
Saludos.-
Hola Matías, una APK es un archivo de instalación de una aplicación móvil. Con una PWA no hay APK puesto que es que tu propia web funciona como si fuera una app. Hasta el punto en el que cuando un usuario entra en tu web desde el móvil, le sale una notificación para que pueda dejar un acceso directo a tu web.
No sé si he respondido a lo que me preguntabas…
Un saludo!!
Buenas . He instalado Pwa para WordPress, he configurado todo y, se supone que ahora lo que tengo que hacer es poner en el Navegador de mi móvil la Url de mi web y ya está ¿verdad?.
Porque lo hago , me sale la web pero no sale ningún popau que diga que si lo quiero instalar en el móvil. AYÚDAME, POR FAVOR