¿Qué es una Progressive Web App? (PWA)

Sin ánimo de querer ponernos técnicos podríamos resumir a lo bruto que una Progressive Web App (PWA) es un sitio web que, una vez lo has visitado desde el móvil, puedes guardarlo y, por lo tanto, se comporta como una aplicación nativa. Como bien sabrás (y, si no es así, para eso estamos) una aplicación de móvil nativa es aquella que se ha desarrollado específicamente para un sistema operativo, ya sea IOS, Android o Windows Phone.

De esta forma, guardando o instalando el sitio web en el dispositivo móvil del usuario, al pulsar sobre el icono del sitio web o blog se muestra una pantalla de carga, se elimina la interfaz de usuario de Google Chrome e, incluso, si el usuario no dispone de conexión de datos, podrá ver igualmente el contenido del sitio.

Si tu sitio web o blog es una Progressive Web App, cuando un usuario acceda a él desde Chrome en Android, el navegador de Google le solicitará que lo guarde en la pantalla de inicio de su dispositivo, colocando en ella el icono que hayas elegido. A partir de ese momento accederá a tu sitio web o blog como si de una aplicación nativa se tratase, con las ventajas que conlleva.

¿Qué ventajas tiene que tu sitio web o blog sea una PWA?

Los beneficios de que tu web sea una Progressive Web App son múltiples, especialmente teniendo en cuenta que las PWA no están condicionadas por los límites impuestos tanto a sitios web como a aplicaciones nativas. Pero si tenemos que destacar algunas ventajas, nos quedamos con las que os comentaremos a continuación.

• No es necesario que utilices una tienda de aplicaciones como Play Store o AppStore para poner a disposición de los usuarios tu app.
• Los usuarios accederán a tu sitio web a través del navegador de internet y Chrome les preguntará si quieren «instalar» la app en su dispositivo. En caso de que acepten, se añadirá un icono a la pantalla de inicio del móvil.
• De esta forma, el usuario puede probar la aplicación antes de «instalarla» en su dispositivo móvil.
• Además, las actualizaciones en la app se producirán de forma automática, sin necesidad de interaccionar.
• Al acceder a la Progressive Web App (PWA), el usuario verá una pantalla de bienvenida.
• Será un sitio de confianza porque todos los intercambios de datos tienen que ocurrir a través de una conexión segura HTTPS.
• Si el usuario se queda sin conexión a Internet podrá seguir utilizando tu PWA, que será rápida al poder cargar elementos offline.
• La «instalación» es realmente ligera porque sólo se utiliza un tamaño pequeño de datos en caché.

Ten en cuenta que para poder convertir tu sitio web o blog en una Progressive Web App (PWA) este se debe ejecutar en un dominio seguro, es decir, debe estar asegurado con un certificado SSL.

Puedes comprobar si tu sitio web o blog se ejecuta en un dominio seguro fijándote en el protocolo de transferencia de hipertexto, en la barra de la URL. Si aparece HTTPS, tienes instalado un certificado SSL. Si, por el contrario, aparece HTTP, tendrás que instalar un certificado SSL para poder convertir tu web en una PWA.

Cómo convertir tu web WordPress en una Progressive Web App

Lo primero que tienes que tener claro es que las Progressive Web Apps necesitan un manifiesto que proporcione información sobre la aplicación en un archivo de texto JSON (JavaScript Object Notation). En resumidas cuentas, se trataría de crear un manifiesto básico y vincular una página web al mismo.

Ahora es cuando estás a punto de abandonar la lectura del post porque intuyes que te va a tocar prestar mucha atención, seguir unos pasos muy complicados y cruzar los dedos para que todo haya salido bien y no hayas tocado algo que no debías. Pero nada más lejos de la realidad, así que te invitamos a que prosigas con la lectura porque te lo vamos a poner muy fácil.

Un método muy sencillo para convertir una web en una Progressive Web App #PWA Clic para tuitear

Lo cierto es que te lo va a poner realmente fácil un plugin de WordPress que se encarga de crear el archivo manifest.json y configurar tu Progressive Web App en un abrir y cerrar de ojos. Este método es rápido, sencillo y eficaz, por eso es el que hemos elegido para compartir en nuestro blog.

Análisis previo de la página web o blog

En primer lugar, para poder contrastar resultados antes y después de convertir tu página web o blog WordPress en una Progressive Web App, te recomendamos que utilices la herramienta de Google Lighthouse.

Introduce la URL de tu página web o blog y deja que la aplicación Lighthouse analice varios aspectos acerca del rendimiento, la accesibilidad, las mejores prácticas, el SEO, así como la optimización como PWA.

En este caso, podemos comprobar cómo Lighthouse muestra un resultado de 58 puntos sobre 100 para la página web analizada en lo que se refiere a PWA.

Una vez hayamos convertido la página web o blog WordPress en una Progressive Web App, volveremos a realizar el análisis para comparar los resultados en este aspecto.

En nuestro artículo sobre Lighthouse, herramienta de auditoría de páginas web de Google, te explicamos las funcionalidades y la información que te ofrece esta aplicación.

Instalación del plugin Super Progressive Web Apps

Vamos a ponernos, ahora sí, manos a la obra. En el repositorio de plugins de WordPress encontrarás el plugin Super Progressive Web Apps, que deberás instalar y activar.

Una vez instalado y activado, se mostrará en el menú lateral de WordPress una nueva opción, «SuperPWA», mediante la cuál podrás acceder a la configuración del plugin («Ajustes»).

Tendrás que introducir el nombre de la aplicación, la descripción, cargar el icono, configurar los colores del fondo y del tema, la página de inicio, así como establecer la orientación de la aplicación en los dispositivos.

Al guardar los ajustes podrás comprobar que el archivo manifest ha sido creado por el plugin e, incluso, podrás verlo. También se habrá generado el service worker (script que se ejecuta en segundo plano) y se mostrará información sobre el protocolo que utiliza tu web, que recordamos que debe ser HTTPS.

En definitiva, el plugin hace el trabajo por ti y genera los archivos necesarios para convertir una página web o blog WordPress en una Progressive Web Application o PWA.

Si te interesa, puedes curiosear en el archivo manifest.json generado por el plugin. Sólo tienes que hacer clic en «verlo aquí» dentro de la configuración del mismo (observa la imagen anterior) y accederás al contenido del archivo.

Como podrás comprobar, la información que contiene es la misma que has introducido al configurar el plugin, sólo que has podido hacerlo de una forma más amigable.

A partir de ahora, cuando un usuario acceda por primera vez a tu página web a través del navegador Google Chrome, el navegador mostrará un mensaje preguntando si la quiere guardar en la pantalla de inicio del dispositivo. Si el usuario accede a guardarla, se creará un icono de aplicación en la pantalla de inicio (la imagen es la que has configurado previamente como icono de la app).

Auditar una Progressive Web App

Ya con la Progressive Web App creada, vamos a auditar de nuevo la página web con Lighthouse y observaremos los resultados para compararlos con los obtenidos previamente al proceso. En nuestro caso, para la página web que habíamos analizado antes de convertirla en una PWA, recordemos que habíamos obtenido un resultado de 58 puntos sobre 100.

Al auditar de nuevo la página web, hemos obtenido un resultado de 100 (máxima puntuación) en el apartado de optimización como Progressive Web App.

Como puedes ver, el resultado es claro y hay poco que añadir. Obviamente, no es el único factor a tener en cuenta en el rendimiento de una página web en dispositivos móviles, pero es un gran paso para convertirla en una aplicación optimizada para estos dispositivos y mejorar la experiencia de usuario.