En este artículo voy a abordar que es una web PWA, siglas en inglés de Progressive Web App ó una aplicación web progresiva, y cómo conseguir que tu web desarrollada en WordPress lo sea.
Lo primero es explicar un poco de qué va esto de PWA. A grandes rasgos se trata de una aplicación web que se comporta como una aplicación nativa que se puede instalar en dispositios móviles y ordenadores. Pero como quizás eso no queda muy claro te indico las ventajas principales:
- Facilitan que los buscadores (ej. Google) descubran tu web.
- Están especialmente optimizadas para dispositivos móviles.
- Se pueden instalar en un clic y se puede crear un icono para fácil acceso.
- Se pueden navegar incluso no estando conectados a internet, si se han visitado una vez.
- Son independientes del dispositivo y sistema operativo.
Además obtendrás mejor puntuación en los valores de una auditoría como Lighthouse, lo que está directamente relacionado con un mejor posicionamiento orgánico.
Ahora que ya hemos visto las ventajas vamos a ver qué requisitos imprescindibles debe cumplir tu web.
Requisitos para poder ser PWA
No es una lista muy larga… pero hay que cumplir con los requisitos, allá vamos.
1. Web segura
Tu web tiene que ser segura, es decir, tener un certificado ssl válido para que se sirva como https (proviene de las siglas en inglés “HyperText Transfer Protocol Secure”) y si todavía tienes contenido http se tiene que redirigir a https.
Si no entiendes que significa esto o tu web sigue siendo http, empezamos mal. Normalmente ya deberías tener este punto correcto si tu web es una tienda online o si ya te has modernizado hace tiempo, porque Google Chrome anunció que en Enero de 2017 empezaría a marcar como No segura cualquier página web en http.
Si cuando visitas tu web aparece el famoso candado cerrado en la barra donde se escribe la url de la página web a su izquierda, haciendo clic verás que pone: La conexión es segura. Pues eso, que ya cumples con el protocolo https. Si no ves ese candado porque pone No es seguro o el candado está tachado (depende del navegador muestra esto de una manera u otra) por ser http tendrás que adquirir un certificado ssl, los hay gratuitos con Let’s Encrypt pero no todos los proveedores facilitan este tipo de certificado.
2. Archivos de iconos concretos
Tu web tiene que tener unos archivos de iconos de unas dimensiones concretas y formato png fondo transparente. Sí, como lo lees.
Si un diseñador gráfico te ha creado tu logo probablemente ya tienes esos archivos creados. Pero si lo has hecho tu mismo con alguna aplicación gratuita, tendrás que revisar si tienes estos tamaños: 192×192 píxeles y 512×512 píxeles, ambos en formato png y con fondo transparente.
¿Qué no los tienes? No desesperes, hay herramientas online gratuitas que te los crean a partir de una imagen en jpg, png o gif, junto con el archivo de manifiesto que vamos a ver en el siguiente punto. Yo he usado esta página que es la que he visto que crea todos los archivos de icono y el manifiesto correctos:
https://realfavicongenerator.net/
En el paquete descargable encontrarás los archivos de iconos mencionados anteriormente. Tan solo tienes que subirlos a la biblioteca de medios de tu WordPress para poder usarlos más adelante.
3. Archivo de manifiesto y Service Worker
He condensado en un solo punto estos 2 requisitos porque con el plugin que te voy a recomendar ya vas a tener solucionados ambos sin que tengas que crearlos tú. De todos modos te explico brevemente que es cada uno, aunque es algo técnico.
El archivo de manifiesto, normalmente llamado manifest.json pero que también puede ser encontrado como site.webmanifest (la herramienta del punto anterior lo genera con ese nombre), es un archivo donde se especifican los parámetros de la PWA como son: nombre, nombre corto, color de fondo, color del tema, visualización, orientación, iconos. No profundizo más porque cuando veamos la configuración del plugin hablaremos de esto.
El Service Worker es un código javascript que va a permitir la funcionalidad offline, es decir, navegar por la web sin conexión a internet, y el cacheado de recursos. Si no tuviéramos el plugin que nos hace estos pasos tendrías que crear 2 archivos js: uno para registrar el archivo service_worker.js que lo puedes llamar regist_serviceWorker.js y que se tiene que invocar dentro del código de la página web, y el propio archivo service_worker.js. Y ya no sigo para no aburrirte. Con el plugin esto es pan comido.
Bueno pues ya está, esto es todo. Ahora vamos a ver la configuración del plugin maravilloso que nos va a hacer que nuestra web se PWA.
Plugin para convertir mi web en PWA gratis
Como todo lo relacionado con WordPress hay varias opciones gratuitas y de pago que hacen lo que necesitamos. En particular yo me he decantado por este plugin gratuito: PWA for WP & AMP.
Ha sido actualizado recientemente, es compatible con la última versión de WP (la 6.4.1 en el momento de hacer este post). Muy fácil de configurar, con los ajustes por defecto ya genera la PWA de tu web, pero te aconsejo adaptarlo al estilo de tu web mediante las opciones que tiene de configuración.
Vamos por pasos. Nada más instalarlo y activarlo te lleva a su página de ajustes, donde verás que está ya todo activo y funcionando.
En esa pantalla vemos que el estado dice que la PWA está funcionando, que lo tenemos activo y que cumplimos con el archivo de manifiesto (Manifest), el Service Worker y https. Para comprobar que esto es así puedes ejecutar la auditoría Lighthouse para tu web, dándote un resultado como este:
Si no quieres no tienes que hacer nada más pero yo te aconsejo adaptar la PWA al estilo de tu web y hacer algún otro ajuste de configuración. Te cuento.
En la pestaña Setup tenemos dos configuraciones: General y Design (diseño). En General es donde puedes modificar, si quieres, el nombre de la aplicación, el nombre corto, la descripción, que en mi caso ya ha puesto lo correcto por lo que no lo he modificado. Lo que seguro que vas a querer cambiar son las imágenes de los iconos. Aquí es donde vas a usar los archivos de icono que hemos visto en el punto 2 de los requisitos. Fíjate bien en el tamaño que te piden en cada caso. En el primero el de 192×192 y en los otros tres es el de 512×512.
Bien, ahora ve a la opción Design para cambiar el color de fondo y el color del tema que tu tengas en tu web.
Con esto ya hemos adaptado la parte visual de la aplicación. Ahora vamos a la pestaña Features (funcionalidades) y la pestaña Advance (Avanzado).
En Features te aconsejo activar: Pre Caching (gestión de caché) y Loader (cargador avanzado). En Advance marca «Prefetch manifest URL link» y «Cache External Links«.
Eso es todo. Espero que haya sido de utilidad este artículo y que tu paso a PWA sea fácil.