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

progressive web app 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?

progressive web app

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

notificacion 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

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?

Te puede interesar leer:

¿Necesitas ayuda con tu web?

Puedo ayudarte a conseguir tus objetivos gracias al posicionamiento web, publicidad online y diseño web

11 comentarios en «Qué es una Progressive Web App y cómo crear una en WordPress»

  1. 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.

    Responder
    • 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!!

      Responder
  2. 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!

    Responder
    • 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.

      Responder
  3. 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!!

    Responder
  4. 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.-

    Responder
    • 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!!

      Responder
  5. 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

    Responder

Deja un comentario