wordpress-progressive-web-app-pwa

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

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.

TAMBIÉN PUEDE INTERESARTE:  ¿Qué es una landing page?

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.

TAMBIÉN PUEDE INTERESARTE:  Nuevo webinar SEO by Siteground

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.

TAMBIÉN PUEDE INTERESARTE:  eShow 2018: 'Indexa como nunca lo habías hecho' por Iñaki Huerta

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!

Estos artículos también pueden interesarte
¿Qué es el WPO? ¿Porqué es importante para el seo ... Definición de WPO   Lo que llamamos WPO o Web Performance Optimisation (optimización de rendimiento web) cubre básicamente todos los aspectos...
Checklist SEO para Webmasters y Programadores Este “SEO checklist” pretende cubrir los principales aspectos SEO que se pueden ver afectados por un cambio técnico en una página (o un grupo de págin...
Webinar: cómo usar Wikipedia para análisis SEO Como cada mes, Digital Growth, de la mano de Jorge González, y Site Ground, organizan un nuevo webinar SEO gratuito, esta vez con una invitada que lle...
Carlos Ortega (@carlos_darko)
carlos.ortega@digitalgrowth.io

SEO, Desarrollador Web y Community Manager. Enamorado de Internet, me encanta picotear aquí y allá para conocer poco a poco todas las caras que pueda de este inmenso diamante virtual.

9 comentarios
  • Jose Varghese
    Posted at 07:30h, 26 julio Responder

    Thanks a lot for mentioning our plugin SuperPWA.

    • Carlos Ortega
      Posted at 11:24h, 26 julio Responder

      Thank you for creating such a wonderful plugin for free and help us all to make things so much easier 🙂

  • juan jesus Guisbert
    Posted at 21:55h, 26 julio Responder

    Excelente, te agradezco por el tutorial! saludos desde Bolivia Carlos.

  • Carlos Ortega (@carlos_darko)
    Posted at 06:51h, 06 agosto Responder

    Gracias a ti por leerlo y comentar, Luis :). Pues ahora mismo te puedo decir https://www.soloquiz.com que me venga a la cabeza como ejemplo de web usando el plugin, pero contando que lleva más de 7000 descargas ya y 55 de 55 valoraciones con 5 estrellas… tiene pinta de que se va a convertir en un standard para esto.

  • Borme
    Posted at 12:28h, 16 octubre Responder

    Carlos eres un fenómeno, un crack, tu artículo me ha ayudado muchísimo.
    Saludos

  • Jorge
    Posted at 12:37h, 24 octubre Responder

    Holaaa muy buen el post!!! Te hago una consulta: a mí me aparece en rojo abajo de audits: múltiple tabs áre bening controles buenas the sale service worker. Close your other tabs on the same Origin yo audit this page” pero no me deja apretar run audits..que puedo hacer o a q se debe? Gracias!!!

    • Carlos Ortega (@carlos_darko)
      Posted at 12:45h, 24 octubre Responder

      Hola Jorge,

      Ese mensaje te aparece porque tienes abierta la página en varias pestañas a la vez,. Deja sólo una abierta y ya verás como no hay problemas, saludos!

Escribe un comentario

Uso de cookies

Este sitio web utiliza cookies, tanto propias como de terceros, para recopilar información estadística sobre su navegación y mostrarle publicidad relacionada con sus preferencias, generada a partir de sus pautas de navegación. Si continúa navegando, consideramos que acepta su uso. Más información aquí

ACEPTAR
Aviso de cookies