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
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.
Puedes descargar el plugin ‘Super Progressive Web Apps’ desde aquí:
https://wordpress.org/plugins/super-progressive-web-apps/
OneSignal
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.
- 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.
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.
Para cuando acabe debería mostrarte la puntuación sobre 100, los procesos no superados y los que sí. Algo como esto:
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. ¡Hasta la próxima!
18 respuestas
Thanks a lot for mentioning for WordPress as a pwa
Excelente, te agradezco por el tutorial! saludos desde Bolivia Carlos.
Carlos eres un fenómeno, un crack, tu artículo me ha ayudado muchísimo.
Saludos
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!!!
Como hago para descargar la aplicación, para enviarla a las personas, para publcarla en play store por ejemlo
Gracias por el post sobre como convertir un WordPress en un pwa, tengo una duda. Tengo una web de miembros, es una escuela web y tengo Simple membership. podría caerse mi web al instalar este super pwa?? Me da en verdad miedo porque son clientes que pagan por su membresía y tengo ya 300 y quedará muy mal si se cae la página
Excelente articulo me ayudo a poner en 100 el Progressive Web App antes lo tenia en 54.
Muchas gracias.
Como hago para descargar la aplicación pwa para enviarla a mis amigos para que la instalen en su teléfono o subirla a goggle play?
Muchas gracias, acabas de darme un 100/100 en PWA.
Es posible hacer PWA a una página que usa woocommerce?
Hola, yo he probado uno que no está en el listado, es GdcApp, que con un sólo plugin te convierte la web en PWA y te deja enviar PUSH. Lo único es que hay que crearlo desde su web