Inicio SEO Cómo convertir tu WordPress en una Progressive Web App (PWA)

Cómo convertir tu WordPress en una Progressive Web App (PWA)

por Carlos Ortega

Según los últimos datos, a fecha de 2018 cerca del 30% de las páginas web de Internet están desarrolladas en WordPress. En concreto el 28%. Así, para empezar.

Eso son muchos WordPress… muchas webs que van a poder convertirse en Progressive Web Apps (de las que ya comentamos sus muchas ventajas hace poco) de manera muy fácil y en menos de diez minutos. Para ello lo único que necesitaremos será instalar y configurar un par de plugins gratuitos.

PLUGINS NECESARIOS PARA QUE TU WORDPRESS SEA UNA PWA

Los dos plugins que usaremos son Super Progressive Web Apps y OneSignal. Vamos a pasar a verlos un poco en detalle y a ver cómo los tendremos que configurar.

SUPER PROGRESSIVE WEB APPS

super-progressive-web-apps-plugin

Este plugin es básico para lo que queremos, ya que se encargará de hacer tu web instalable e instalará el service worker que se encargará de ejecutar todas las características propias de una Progressive Web App. Lo único que tendremos que hacer para dejarlo funcionando correctamente es instalarlo y acceder a la sección de WordPress que te aparecerá en SuperPWA > Settings. Aquí tendremos varios campos a rellenar:

Application Name

El nombre de la PWA. Generalmente querrás poner el nombre de tu blog/empresa.

Application Short Name

Aquí pondremos el nombre que queramos que aparezca bajo el icono una vez instalada la PWA en cualquier dispositivo. Sería el equivalente al nombre de las Apps. No debe ser muy largo.

Description

Una pequeña descripción sobre lo que trata tu web.

Application Icon

El icono que queramos que aparezca una vez instalada la PWA, así como en el faldón superior que aparece cuando miras con el smartphone cuántas aplicaciones tienes abiertas en ese momento. Puedes poner transparencias si es una imagen .png.

Splash Screen Icon

Cuando accedes a la PWA aparece una pantalla de carga inicial de X color con un icono. Aquí defines qué icono será. Generalmente se pone el mismo que en el apartado anterior.

Background Color

El color de fondo, obviamente.

Theme Color

Aquí puedes especificar el color principal de tu Progressive Web App. Suele utilizarse para el faldón superior que comentaba en el Application Icon y algún detallito más.

Start Page

La URL que servirá de página de inicio una vez accedas haciendo clic en el icono. Puedo o NO coincidir con la home por defecto de la web. En Digital Growth por ejemplo, no es coincide, ya que la PWA utiliza como URL de inicio nuestra página del blog.

Offline Page

Aquí tenemos que poner la URL que queremos que cargue cuando el usuario no tiene conexión a Internet ni acceso a la versión cacheada de la Start Page.

Orientation

Por último, en este campo definimos si queremos que la PWA cargue siempre en vertical u horizontal. También puedes dejarlo a la elección del usuario.

Una vez rellenemos toda la información, podremos comprobar que todo está correctamente configurado con los checks que te mostrará el propio plugin.

IMPORTANTE: Recuerda que es obligatorio que la web esté montada sobre HTTPS para que la PWA sea válida.

status

Puedes descargar el plugin ‘Super Progressive Web Apps’ desde aquí:
https://wordpress.org/plugins/super-progressive-web-apps/

ONESIGNAL

one-signal-wordpress

Hay una funcionalidad típica de las PWA que el plugin anterior no tiene, y son las notificaciones Push. De hecho no lo tiene porque como los mismos desarrolladores comentan, vieron que ya había un claro referente en este tema con OneSignal, con lo que prefirieron hacer su plugin totalmente compatible a ellos en lugar de implementar de cera dicha característica.

Así pues, éste será el segundo plugin que necesitaremos. Lo instalamos y accedemos a la nueva sección que veremos en el sidebar de nuestro WordPress: OneSignal Push. Nos pedirá dar un par de pasos antes de poder configurar nada:

  • Darnos de alta como usuarios en su página web, donde entre otras cosas tendremos el panel de control desde el que podremos ver cuántos seguidores tenemos o la efectividad de nuestras notificaciones.

push-notificacions

  • Crear las Web Push App para los diferentes sistemas que quieras. Esto es necesario para que el plugin ‘tenga permiso’ para enviar las notificaciones a los usuarios. Las podrás crear desde la propia web de OneSignal, una vez hayas iniciado sesión.

onesignal-1

Una vez hecho esto tendremos que ir a ‘OneSignal Push’ en nuestro WordPress y poner también las ID y API en la pestaña ‘Configuration’ (si pones el ratón sobre el símbolo ‘?’ verás dónde encontrarlas de forma muy sencilla). Tambien tendremos que confirmar que nuestra web está en HTTPS.

Para terminar, en los campos siguientes el plugin nos dará algunas opciones a la hora de qué mensajes mostrar al usuario, a qué URL irán al hacer clic o qué imagen aparecerá en sus dispositivos al recibir la notificación.

IMPORTANTE: Este plugin sólo enviará notificaciones push cuando publiquemos un nuevo post en la web. Si lo que queremos es poder enviarles notificaciones en momentos determinados como promociones o cualquier otra cosa ajena al blog necesitaremos instalar también el plugin OneSignal Sender.

Puedes descargar el plugin ‘OneSignal’ desde aquí:
https://es.wordpress.org/plugins/onesignal-free-web-push-notifications/

CÓMO CONFIRMAR QUE NUESTRA WEB ES UNA PWA

Ahora que hemos instalado y configurado todo, queremos asegurarnos de qué todo funciona como debería. Para eso usaremos la herramienta de auditoría de Google: Lighthouse. Tiene una extensión para Chrome, pero no es realmente necesaria al ser una herramienta integrada en el propio navegador.

Entra a tu web (una vez seguidos todos los pasos de este post) y con el botón derecho haz clic y ves a ‘Inspeccionar’. Una vez se abra el panel que verás, ves a la pestaña ‘Audits’, haz clic en el botón ‘Perform an audit…’ y marca únicamente la casilla de ‘Progressive Web App’. Finalmente ‘Run audit’ y… esperamos.

audit-lighthouse-pwa

Para cuando acabe debería mostrarte la puntuación sobre 100, los procesos no superados y los que sí. Algo como esto:

lighthouse-resultados

Bueno, parece ser que tenemos por ahí una URL en HTTP que nos está incordiando un poco… pero ¡eh! ¡no está mal! 82/100 🙂

Y así es como podemos subir el nivel de nuestra web en WordPress adaptándola a las nuevas tendencias, en concreto a las Progressive Web Apps. Ah, este tipo de webs no son incompatibles con otras mejoras como AMP, al contrario, si las combinas todavía conseguirás mejores resultados.

Como siempre, cualquier duda, comentario o sugerencia podéis escribir en la sección de comentarios o comentármelo por Twitter. ¡Hasta la próxima!

¿Crees que le puede interesar a más gente? ¡Comparte!

También puede interesarte

Deja un Comentario

* Al utilizar este formulario aceptas el almacenamiento y gestión de tus datos por parte de esta web.

Esta web usa cookies. Si continúas navegando, consideramos que aceptas su uso. OK, sin problema Leer más

back-to-top