Las últimas notícias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital 

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

Por

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í: