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 o comentármelo por Twitter. ¡Hasta la próxima!

QUÉ ES UNA PROGRESSIVE WEB APP

Las Progressive Web Apps, más cariñosamente conocidas como PWA’s, son sitios que combinan lo mejor de las webs y lo mejor de las apps. Más adelante veremos las ventajas que supone a la hora de navegar por ella. Pero sobretodo, para Google, una PWA debe siempre poder ser descrita con estas tres características fundamentales.

FIABLE

Una Progressive Web App debe ser accesible, total o parcialmente, aún y sin conexión. El usuario nunca tiene que ver a nuestro querido y odiado downasaur. Es sin duda una de las principales ventajas de este tipo de web.

Nuestro querido Downosaur se encamina a una nueva extinción…

RÁPIDA

Debe ser rápida, cargar casi al instante, dando una gran sensación de inmediatez. Además una PWA responde rápido y con suavidad a cualquier interacción por parte de usuario: un click en un enlace, en un botón, un scroll…

CAUTIVADORA

También tiene que sentirse nativa, tener lo que se llama el ‘look & feel’ de una app. Hemos de sentir al navegar por ella que es algo desarrollado desde un principio para mobile, sin elementos que nos saquen de esta inmersión como barras de navegador, cursores, webs cortadas por un lado o letras demasiado pequeñas.

VENTAJAS DE LAS PROGRESSIVE WEB APPS

Antes decíamos que una PWA coge conceptos y características de las apps, lo que le da algunos ‘superpoderes’ que hasta ahora no eran posibles en una web mobile.

INSTALABLE

Podremos instalar la web en nuestro smartphone, añadiendo su icono y nombre en el escritorio como si se tratara de una app más. Esto mejorará tanto la visibilidad como la inmediatez de acceso en futuras visitas. Además al tratarse realmente de una web, no necesita ocupar espacio en el propio dispositivo y se instalará casi al instante.

SE ACTUALIZA AUTOMÁTICAMENTE

Tampoco será necesario estar pendiente de futuras actualizaciones para descargarlas. La propia PWA se encargará de ver qué versión tienes y de actualizar automáticamente y en un segundo planocualquier nuevo elemento o modificación que haya podido haber.

ACCESIBLE SIN CONEXIÓN

Gracias a las funciones de pre-cacheo de las Progressive Web App, la navegación es siempre posible (y rápida) independientemente de la calidad de conexión en ese momento. Se acabó el quedarnos sin poder usar la web al entrar en un túnel o caerse Internet.

NOTIFICACIONES PUSH

Una de las funciones más llamativas y claramente heredada de las apps, la posibilidad de mandar notificaciones Push al smartphone aún y cuando estos no tienen la PWA abierta. Es una manera de poder atraer la atención del usuario para que vuelva a navegar por nuestra web.

NATIVA

Como ya hemos comentado, al disponer de icono en el escritorio, cargar con un splashscreen, mostrarse a pantalla completa y sin ningún tipo de elemento de navegador… todo esto da una sensación de app enorme, de ser algo desarrollado nativamente para mobile.

ENLAZABLE

Otra ventaja frente a las apps ya que, al tratarse de una web, todas las URL’s son perfectamente enlazables y fáciles de compartir.

Sensación al utilizar una PWA

ELEMENTOS PRINCIPALES

Vale, ahora ya sabemos qué funciones principales tiene una Progressive Web App pero ¿cómo es posible que haga esas cosas? Bueno, vamos a ver los diferentes actores que encontramos en cualquier PWA. Algunos imprescindibles y otros más optativos.

APPLICATION MANIFEST

Imprescidible. El Application Manifest es un archivo en formato .json en el que definiremos muchas de las características de aspecto visual y de usabilidad de la PWA. Por ejemplo, podremos especificar cosas como:

• El nombre de la PWA
• El icono que se mostrará cuando sea instalada
• La página de inicio una vez hagamos clic en el icono
• El color principal
• Si preferimos que sea visualizada en vertical u horizontal
• Si queremos que se vean más o menos elementos del navegador al navegar por ella
• Una breve descripción sobre qué trata la web
• El idioma principal

Este archivo se llamará generalmente manifest.json (aunque puedes ponerle otro nombre) y deberá estar alojado en la raíz del dominio si lo que queremos es que toda la web sea una Progressive Web App. Si por el contrario sólo queremos que una parte de la página sea PWA, el App Manifest debería alojarse en la raíz del directorio escogido.

SERVICE WORKER

Imprescindible. El gran motor de las PWA y motivo principal de la mayoría de sus características. Un Service Worker es un JavaScript peculiar, ya que no actúa únicamente en una URL, sino en toda la web. Una vez entramos en la Progressive Web App, se registra y activa, quedando activo entre el usuario y el servidor siempre en segundo plano, incluso aunque cerremos la web.

Al estar siempre activo, reacciona a los diferentes eventos que le llegan tanto del servidor como del usuario. Estos eventos pueden ser principalmente de tres tipos.

• Fetch: Peticiones del usuario para descargar elementos del servidor.
• Push: Peticiones del servidor para enviar notificaciones al usuario.
• Sync: Sincronización de datos.

Según reciba peticiones de uno u otro evento, irá activando diferentes funciones: cacheo, sincronización en segundo plano, notificaciones push, entrega de la versión cacheada de la web si el usuario no tiene conexión en el momento que hace las peticiones…

Importante tener en cuenta que, debido a que los Service Worker capturan mucha y muy comprometida información de esta comunicación entre el navegador y el servidor, la navegación en una Progressive Web App debe ser siempre bajo HTTPS. Necesitamos una navegación cifrada y segura para evitar problemas.

DISEÑO RESPONSIVE

Imprescindible. Hoy en día parece ya algo de cajón, pero una web tiene que poder visualizarse correctamente en cualquier tipo de dispositivo, sea cual sea sus medidas y resolución. Por tanto, el diseño responsive es básico, más si tenemos en cuenta la naturaleza mobile de una PWA.

Se ha hablado mucho y muy bien de cómo y por qué de este tema, con lo que no diremos mucho más aquí.

API DE GEOLOCALIZACIÓN

API necesaria si queremos poder pedir acceso a la geolocalización del usuario. También para esto necesitaremos tener una web segura en HTTPS.

API MEDIA

Por último, con esta otra API tendríamos acceso a las funciones nativas del dispositivo como pueden ser la cámara o el micrófono.

¿CÓMO INSTALAR UNA PWA EN EL MÓVIL?

Para instalar en la pantalla de nuestro smartphone una Progressive Web App, los usuarios tendrán dos formas de hacerlo.

A TRAVÉS DEL BOTÓN QUE TE MOSTRARÁ EL NAVEGADOR

La manera más directa y que facilitará que tus usuarios se instalen la web, aunque para que el navegador muestre este faldón o ‘prompt’ de instalación, la PWA tendrá que cumplir unos mínimos:

• Un manifest.json con al menos el nombre, nombre corto, página de inicio e icono de 192×192.
• Un service worker registrado en la web.
• Navegación segura a través de HTTPS.
• Recibir al menos dos visitas con un mínimo de 5 minutos de espacio entre ellas.

Si cumplimos estos requisitos veremos algo así:

A TRAVÉS DEL MENÚ DEL NAVEGADOR

Si en cambio no cumplimos esos mínimos o el usuario no acepto instalar la PWA cuando el navegador le mostró el aviso, la opción que nos queda es hacerlo desde el propio menú del navegador. Dando al icono de los tres puntitos y después a ‘Añadir a pantalla de inicio’.

NAVEGADORES COMPATIBLES

En la siguiente imagen puedes ver la lista de compatibilidad de los diferentes navegadores con los Service Workers, aunque si necesitas más información sobre funciones específicas puedas mirar aquí.

CONCLUSIONES Y EJEMPLOS

En resumidas cuentas, las PWA’s parecen haber llegado para quedarse, ya que parecen un paso muy lógico a la hora de seguir evolucionando las webs hacia el mundo mobile. En 2014 fue el gran momento de adaptarse, parece que 2018 será el de mimetizarse casi completamente gracias a las Progressive Web Apps y las mejoras que imaginamos irán añadiéndose a lo largo de los próximos meses. Estaremos atentos para contároslo todo.

Si queréis ver ejemplos de páginas que ya se han pasado a PWA, podéis ver un buen puñado de ellos en la web de pwa.rocks.