¿Has oído hablar de PWA pero no terminas de tener claro del todo? ¿Estás buscando la manera de aplicar las ventajas de las apps a tu web de WordPress? ¡Estás en el sitio correcto! Es una realidad, los smartphones ya son parte de tu vida (se podría decir que son una extensión del cuerpo ¿verdad?) y, con ellos, las aplicaciones móviles. ¡Piénsalo! Para comprar en tu tienda de ropa favorita, para hacer un pedido de comida, para reservar una cena en un restaurante, etc, son cientos las cosas que haces a través de tu teléfono móvil inteligente. Las apps son uno más, por lo que las PWA se van abriendo camino (se trata de convertir tu web en una app). En esta guía te quiero explicar qué son, las ventajas que ofrecen a tu sitio web y los plugins con los que puedes convertir tu WordPress en una Aplicación Web Progresiva.

pwa progressive web app aplicacion web progresiva que son ventajas plugins wordpress

Son muchas las empresas y negocios que ya han visto un gran futuro en las apps como herramienta de marketing móvil y están apostando por ellas. Atrás queda el diseño web responsive como gran idea pero que, sin embargo, no obtuvo los resultados que se esperaba. A pesar de que adaptar las páginas a diferentes dispositivos móviles parecía ser un gran avance, a la hora de la verdad, muchas de las páginas web, blogs y tiendas online que han apostado por un diseño adaptativo se han tenido que enfrentar a graves problemas de compatibilidad (entre navegadores web) y con ello a una muy mala experiencia móvil. Pero las PWA nacen para ofrecer una solución alternativa, con el objetivo de ofrecer una mejor experiencia de usuario (incluso cuando no tienes conexión a Internet).

Qué es una PWA, cómo funciona y para qué sirve

Lo primero que debes entender es qué es una PWA o, lo que es lo mismo, Progressive Web App o Aplicación Web Progresiva. De manera muy sencilla se podría decir que una PWA es la suma de las mejores características de las apps nativas y las páginas web. Difuminan de alguna manera las barreras que pueden darse entre una aplicación nativa y un sitio web pero seleccionando lo mejor de cada una de ellas. En 2015, la diseñadora Frances Berriman junto al ingeniero de Google Chrome Alex Russell, dieron vida al término Progressive Web Apps. Con él describían las aplicaciones que utilizaban y aprovechaban las características de los navegadores más actuales.

Pero muchas de estas tecnologías ya existían antes incluso de que Berriman y Russell acuñasen el término, aunque lo más novedoso vino a raíz de que otras plataformas fuesen respaldadas por Google o Mozilla. Las Progressive Web App han evolucionado de la tecnología web basada en los «services workers«. ¿Esto qué quiere decir? Pues que las PWA ejecutan las funciones en segundo plano, incluso cuando el navegador del ordenador o dispositivo móvil no está abierto. Y es que las PWA surgieron con la única intención de optimizar el rendimiento de cualquier sitio web (incluidas las instalaciones WordPress, en las que me voy a centrar) y poder adaptarlas a cualquier tipo de dispositivo móvil. Al igual que las apps nativas, éstas están desarrolladas con código HTML, CSS y Javascript.

Qué papel juegan las PWA en una estrategia de marketing móvil

Gracias a la facilidad de ser compartida, las PWA se han convertido en una estrategia de marketing imprescindible para cualquier negocio (motivo de ello es la ayuda que proporciona al posicionamiento SEO). Al igual que con una app móvil nativa, debes tener planificada una estrategia de lanzamiento tanto «pre» como «post» para así maximizar el número de descargas y de interacciones. Primero de todo, coge una agenda o crea un documento online donde puedas dejar reflejado y por escrito en qué punto estás en cada momento o en cada una de las fases (te servirá de ayuda para poder revisar algunos elementos más adelante).

Si vas a lanzar una PWA tienes que generar expectación en los usuarios, ya que tienen que desear tenerla en sus smartphones. Difunde el estreno en todas tus redes sociales y, cuantas más personas sepan que vas a lanzar tu aplicación web progresiva, más posibilidades de que las descarguen tendrás. Imagina que un pequeño negocio (un restaurante, una peluquería, un gimnasio, etc.) va a lanzar una PWA. Podría preparar unos flyers para repartir a los clientes en el local cuando lo visiten. En ese folleto puede añadir un código QR para que que los clientes lo escaneen y en segundos tengan la PWA instalada en sus teléfonos móviles.

La mejor manera de incitar la descarga es saber transmitir el valor que tiene que lo hagan y los beneficios que obtendrán. Si los usuarios no ven el valor, la importancia que tiene que lo hagan, lo que van a obtener si lo hacen o lo que van a perder si no la descargan, no lo harán. Por otro lado, ¿Por qué no organizar un evento de lanzamiento? Esto también puede ser una gran estrategia de prelanzamiento. Por ejemplo, con un cóctel de bienvenida o el acceso a un sorteo presencial en la celebración del evento. Te recomiendo que hagas uso de la creatividad y la innovación. La competencia es muy grande y cuanto más original seas y más te diferencies de tus competidores, más oportunidades tendrás de conseguir descargas.

Diferencias entre las aplicaciones nativas y las PWA

Según la wikipedia una aplicación móvil es una aplicación informática diseñada para ser ejecutada en teléfonos inteligentes, tabletas y otros dispositivos móviles. Las aplicaciones permiten al usuario efectuar un conjunto de tareas de cualquier tipo facilitando las gestiones o actividades a desarrollar. A diferencia de las PWA, se desarrollan y son válidas para cualquier sistema operativo al basarse en tecnología web y son compatibles con cualquier dispositivo y sistema.

Una aplicación móvil nativa se desarrolla de manera específica para un sistema operativo en concreto (por ejemplo, para Android, iOS o Windows). En el caso de iOS el lenguaje nativo que utilizan es Objective C y Swift, mientras que en Android el lenguaje de programación es Java y Linux. Además, este tipo de aplicaciones tienen que ser descargadas en tu propio teléfono móvil para poder hacer uso de ellas. Por su parte, las PWA se desarrollan con lenguaje HTML, CSS y Javascript. ¿Qué significa esto? Que después de haber accedido por primera vez a una PWA, puedes guardar un acceso directo en el escritorio y acceder sin necesidad de pasar por un navegador o de tener conexión a internet.

Ventajas destacadas de las aplicaciones web progresivas

Para entender realmente qué es una aplicación web progresiva y las diferencias que existen con una aplicación nativa, tienes que conocer las principales características, ventajas y funcionalidades de ambas opciones. ¿Merece la pena convertir tu sitio web en una PWA? Después de conocer las siguientes ventajas seguro que tienes la respuesta mucho más clara:

  • Se adaptan al dispositivo móvil: Tanto si utilizan un sistema operativo Android como iOS e incluso de manera independiente a si es un ordenador de mesa, un smartphone o una tableta. Esto se da gracias a su diseño multidispositivo. No solo es más cómodo en el momento de la creación sino que también conlleva una reducción de los costes ya que no se hace necesaria la creación de cuentas de desarrollador como en el caso de las aplicaciones nativas.

  • Son indexables por los buscadores: Una aplicación web progresiva permite, de manera rápida y sencilla, copiar la URL y compartirla en cualquier red social o embeberla en un sitio web. Al no ser una aplicación nativa, los usuarios no tienen que descargarla. Y eso disminuye la fricción que se produce durante ese proceso, como el tiempo de espera hasta que la App esté totalmente descargada en el dispositivo móvil del usuario. Según Google Developers «se puede identificar como app gracias al manifiesto W3C y al alcance de registro de service worker».

  • No tienen que pasar por complejos procesos de validación: Cualquier cambio, e incluso actualización de software, no requiere de la aprobación y validación por parte de Apple o Google, por lo que se producen de manera inmediata (esto no pasa con las apps nativas, cuyo proceso de aprobación puede complicar el proyecto de lanzamiento). Además, no necesitarás crear una cuenta de desarrollador para publicarla en Google Play o Apple Store ya que no es una App nativa como tal.

  • Ocupan muy poco espacio en el disco duro: El espacio que ocupa en los smartphones es menor, ya que no se hace necesaria la descarga (las PWA solo pesan unos pocos bytes).

  • Te permiten enviar notificaciones push: Contienen las mismas funciones que cualquier aplicación móvil nativa al uso como, por ejemplo, la funcionalidad para enviar notificaciones push.

  • No necesitan conexión a Internet para funcionar: Otro de los grandes beneficios es la innecesaria conexión a Internet para que sea usada. Sí, has leído bien, no necesitas tener conexión. ¿Cómo es posible siendo una aplicación? Esto es así porque la primera vez que se accede a la progressive web app se queda guardado el contenido en tu dispositivo. Por tanto, la siguiente vez que accedes, incluso sin conexión, podrás acceder a todo el contenido sin restricciones.

  • Se descargan sin tener que pasar por la tienda de apps: Las apps progresivas son muy accesibles ya que no necesitas ir a la tienda de aplicaciones, buscar la aplicación, aceptar la descarga, esperar a que se complete y por fin acceder a ella.

  • Se pueden compartir fácilmente a través de una URL: Son muy accesibles ya que la PWA genera un enlace (una URL) que se puede convertir, por ejemplo, en un código QR, y compartirse en cualquier sitio web, enviarlo por email en una campaña o por medio de las redes sociales.

  • Son muy seguras: Solo se considera que una progressive web app es tal cuando tienen un certificado SSL. Esto quiere decir que la URL que genera deberá comenzar con «https», por lo que primero debes pasar tu sitio web de http a https.

  • No se diferencian de una app nativa: Al tener lo mejor del mundo de las apps nativas y de las páginas web, un usuario no puede diferenciarla visualmente. Y es que, cuando un usuario entra por primera vez a la PWA, verá la barra del buscador con el enlace, pero esto sólo ocurre la primera vez. Acto seguido la app progresiva te sugiere guardar un acceso directo en el dispositivo. Por tanto, la siguiente vez que accedan lo harán como con cualquier app nativa (abriendo el icono de la PWA).

  • Se minimiza muchísimo la fricción de descarga al prescindir de los pasos previos: Los usuarios solo tendrán que aceptar con un «Ok» para disponer de ese acceso en todo momento en sus pantallas (esto ayuda a mejorar la experiencia de usuario). ¿Sabías que en cada una de estas etapas del proceso de descarga se pierde un 20% de los usuarios? Todos estos beneficios y características de las PWA son las que ya han visto muchos negocios, dado que el gran peso que tienen las apps nativas, por lo que los usuarios, tras aprovechar la promoción u oferta, las eliminan de sus smartphones. Aunque en el caso de las grandes empresas, los usuarios ven fácilmente las ventajas de mantenerla no ocurre lo mismo con las PWA de las pequeñas y medianas empresas.

Razones por las que tu necesitas implementar una PWA en tu sitio web

Una PWA no es más que una solución de marketing móvil para las empresas y en especial para las pequeñas empresas. Con una progressive web app favoreces el crecimiento del negocio como tal y con ello el aumento de los ingresos y los beneficios. ¿Cómo ayuda exactamente a un negocio tener una progressive? Deja que te explique varias razones por las que tu necesitas implementar una PWA en tu sitio web:

  • Optimiza la comunicación entre empresa y cliente: Una PWA mejora las comunicaciones entre empresa y cliente, por lo que favorece la fidelización de los usuarios.

  • Mejora el posicionamiento SEO: Gracias a las PWA puedes mejorar tu visibilidad en buscadores, por medio de portales como Google My Business o Yelp, en los que se hace necesario conseguir un buen posicionamiento para aparecer entre los primeros resultados de búsqueda. Por lo general, los primeros resultados de búsquedas son los que obtienen más visitas y esto es gracias a las reseñas. Cuantas más reseñas obtenga un negocio más facilidad de posicionarse entre los primeros resultados. Cuando un usuario está buscando, por ejemplo, un restaurante, los primeros resultados son los que realmente compara. Valorará los comentarios, la puntuación, la ubicación, etc y, finalmente, se decidirá por uno de ellos. Si tu restaurante no está entre los primeros resultados las posibilidades disminuyen considerablemente (los 3 primeros resultados suelen llevarse entre un 60% y un 70% de los usuarios).

Todo esto es posible gracias a una PWA. Si se tratase de una aplicación nativa no podría posicionarse en este tipo de buscadores. Son muchas las empresas que ya están viendo las ventajas que tiene tener una progressive, como la facilidad de ser indexadas, y el descubrimiento a través de motores de búsqueda, a todo este se le suma que cuando un usuario aterriza en la progressive siente que está navegando por una app nativa, así que la experiencia de usuario es inmejorable.

Formas de difundir, compartir y promocionar una PWA

Gracias a la facilidad de ser compartidas, las PWA se han convertido en una estrategia de marketing imprescindible para cualquier negocio (al igual que con una app nativa debes tener planificada una estrategia de lanzamiento tanto pre como post para maximizar el número de descargas y de interacciones). La mejor manera de incitar la descarga es saber transmitir el valor que tiene que lo hagan y los beneficios que obtendrán. Si los usuarios no ven el valor, la importancia que tiene que lo hagan, lo que van a obtener si lo hacen o lo que van a perder si no la descargan, no lo harán. Pero, ¿de qué formas puedo compartir y promocionar una aplicación web progresiva? Estas son algunas de mis favoritas:

  • URL: La primera y la más obvia es desde la propia URL de la web app progresiva. El usuario solo tendrá que escribir o pegar la dirección en la barra de su navegador y acceder directamente.

  • Código QR: Puedes crear un código QR como te explicaba con el ejemplo de los folletos publicitarios. Para que puedas aprovechar todavía más esta opción puedes poner, por ejemplo, el código en el ticket de compra (de forma que los clientes puedan escanearla). Además, puedes incentivarlo con un programa de fidelización por acumulación de puntos. También podrías adjuntar ese mismo código en los emails de las campañas de promoción.

  • Buscador de Google: El buscador de Google es otra de las formas que tiene cualquier negocio para promocionar una aplicación progresiva. Los usuarios pueden llegar a ella con una simple búsqueda del nombre de la empresa. Ten en cuenta que actualmente las búsquedas móviles representan un 60% de todas las búsquedas que se realizan, por lo que te recomiendo que configures una cuenta en Google My Business (una herramienta de Google que ayuda a aumentar la presencia online y genera la confianza en los negocios). Y es que, gracias al marketing de reseñas que se puede implementar de manera sencilla en una progressive web app, cualquier negocio puede aumentar considerablemente los comentarios y valoraciones positivas en cualquier buscador. ¿Esto qué significa? Que se maximizan las posibilidades de que ese negocio aparezca en los resultados de Google Local Pack (y esto incide de manera directa en un aumento de clientes y por consiguiente de los beneficios).

  • Mensaje de texto: También puedes promocionar una PWA por medio de SMS. Esto mejora no solo la comunicación entre la empresa y el cliente sino que también favorece la comunicación, ese boca a boca que se genera gracias a la facilidad de compartirla.

Las aplicaciones web progresivas pueden compartirse a través de cualquier portal externo como Yelp, Tripadvisor, Facebook, Twitter, Instagram, etc. Simplemente tienes que compartir el enlace y listo. El siguiente paso sacar partido a la PWA tras el lanzamiento. Para empezar debes llevar un seguimiento. Hay que medir cuál es el uso que se está haciendo de la aplicación, por ejemplo, midiendo el engagement con los usuarios, el número de descargas que se hacen y en qué dispositivos, cuál es el número de sesiones, el tiempo medio que los usuarios pasan navegando, etc. Medir continuamente es imprescindible para implementar posibles mejoras o potenciar lo que está funcionando muy bien.

Además, en ningún momento puedes olvidarnos de la promoción. Aunque el primer objetivo sea la descarga, el segundo es muy probablemente que los usuarios no la eliminen y, para ello, necesitas conseguir generar engagement (mostrarle a los usuarios el valor que tiene que la sigan manteniendo). ¿Cómo se puede conseguir? Con promociones y ofertas especiales, contenido exclusivo y con una estrategia de notificaciones push que te permita dar más difusión a todas esas iniciativas. Es importante que, al preparar las estrategias, personalices tus públicos, ya que no todos los usuarios son iguales y cuanto más personalizada y segmentada esté (con campañas de notificaciones push conseguirás mejores resultados).

Ejemplos de éxito de empresas que tienen una PWA

Las aplicaciones web progresivas no son una tecnología nueva pero últimamente están todavía más de moda. Multitud de empresas han detectado el amplio campo de oportunidades que podrían aprovechar utilizando estos sistemas y por supuesto, no se iban a quedar atrás. Y de hecho, con vistas a los resultados, en la mayoría de los casos, estos evolucionan favorablemente. No se podía esperar otra cosa de una aplicación en las que el usuario puede hacer prácticamente lo mismo que en las aplicaciones nativas para Android o iOS, pero sin necesidad de instalar nada: solo se necesita un navegador con conexión a Internet.

  • Twitter: La conocida red social Twitter ya saca partido a su PWA. Tras implementar la aplicación web progresiva, aumentó el número de tweets medio en más de un 75%. Consiguieron reducir su tasa de rebote en un 20% y el peso de la app nativa (de cerca de 100Mb) en dispositivos Apple a 0,6Mb con su PWA.

  • Forbes: Forbes también dio el paso hacia las PWA. Se trata de uno de los medios de comunicación más importantes a nivel global en el mundo de los negocios y las finanzas. Desarrolló su progressive web app con el único objetivo de mejorar la experiencia móvil de sus usuarios y conseguir reducir la velocidad de carga, uno de los principales motivos por los que muchos usuarios se caen en el proceso de descarga, que en ese momento su web tardaba entre 3 y 12 segundos en cargar (no olvides que más de la mitad de los usuarios abandonan una web si tarda más de 3 segundos en cargar). Gracias a la PWA redujo el tiempo de carga a 0.8 segundos, lo que provocó un incremento del número de sesiones en un 43%. Además, ha aumentado el porcentaje de engagement en un 100%, ha multiplicado por 6 el número de suscripciones a sus newsletter y ha pasado de ocupar 43,2Mb en iOS a tan solo 0,2Mb con su PWA.

  • Flipkart: El ecommerce más grande de India también ha seguido los mismos pasos. Con la intención de mejorar la experiencia móvil para sus usuarios decidieron implementar una aplicación nativa pero no obtuvieron los resultados esperados así que, finalmente decidieron crear una aplicación web progresiva para que sus usuarios accedieran a su tienda online. Actualmente el tiempo medio de los usuarios es de más de 3 minutos (frente al escaso minuto de sesión con la app nativa). Otros beneficios son la posibilidad de uso con baja conectividad de datos lo que favorece el uso en el ecommerce y, gracias al sencillez para guardar un acceso directo en sus dispositivos, su tasa de conversión ha aumentado en un 70%.

  • Alibaba: Con Alibaba, el marketplace B2B más grande del mundo, ha pasado lo mismo. Necesitaban mejorar la experiencia móvil para sus clientes y para los nuevos usuarios. Con la incorporación de una aplicación progresiva consiguieron aumentar en un 76% sus conversiones totales, además de un aumento del 14% en usuarios desde iOS y un 30% en usuarios con dispositivos Android. Por otro lado, la facilidad de añadir un acceso directo a los dispositivos consiguió multiplicar por 4 el engagement de los usuarios.

  • The Washington Post: El famoso periódico digital siempre está en continua búsqueda de una buena experiencia móvil, ya que la mitad de sus usuarios visitan este medio de comunicación a través de un smartphone. Tras la creación de su PWA consiguieron reducir en un 88% la velocidad de carga de sus artículos, que supuso un aumento de los usuarios de un 63% además de la fidelización de estos.

  • Starbucks: La cadena de cafeterías Starbucks quería implementar los pedidos online así que decidió crear una PWA con la funcionalidad de pedidos que tuviera la misma apariencia que la app (pero sin la necesidad de conexión a Internet). Al lanzar el nuevo sistema de pedidos a través de su PWA, Starbucks ya ha visto unos resultados muy significativos. Con una reducción del 99.84% en el peso de su progressive web app, ha conseguido que sea una de las favoritas entre sus usuarios. Como resultado, duplicaron la cantidad de usuarios web que realizaban pedidos cada día y los usuarios de dispositivos versión escritorio ahora tienen casi la misma tasa que los de usuarios móviles.

  • Flipboard: Como una de las revista social más conocida del mundo, Flipboard se ha convertido en uno de los mejores ejemplos de noticias online a través de una PWA. Y es que, hasta que crearon esta progressive web app, Flipboard solo podía llegar a sus usuarios desde la versión móvil. Ahora, sin embargo ahora puede llegar tanto a usuarios de su app como a cualquiera que quiera acceder desde la versión de escritorio.

  • Uber: La empresa de servicios de Uber fue reconstruida desde cero como una PWA con el objetivo de ofrecer una experiencia similar a la de la aplicación nativa en las reservas de sus servicios. La PWA se ha diseñado para que reservar un coche sea viable incluso con redes 2G de baja velocidad. Al conseguir replicar la experiencia nativa en una aplicación progresiva, Uber decidió implementar la solicitud de viaje rápido sin importar la ubicación, la velocidad de la red y el dispositivo. La aplicación principal de solo 50kB le permite cargar en 3 segundos en redes 2G.

  • Pinterest: Pinterest comenzó su nueva experiencia de web móvil desde cero como PWA con el fin de crecer internacionalmente. Y es que la red social descubrió que solo un 1% de sus usuarios acababan convirtiéndose en registros. Al darse cuenta de que la oportunidad de mejorar la conversión era abismal, crearon una PWA, lo que dio lugar a que el tiempo de las sesiones aumentara en un 40%. Además, los ingresos que generaban por publicidad aumentaron en un 44% y el porcentaje de fidelización llegó a un 60%.

Mejores plugins de WordPress para convertir tu web en una PWA

¿Sabías que cerca de un 33% de las páginas web del mundo están creadas en WordPress? Es un dato arrollador y a tener en cuento, por lo que te voy a explicar cómo convertir tu WordPress en una PWA. Existen muchos plugins que te facilitarán el cambio de tu sitio web, por lo que he hecho un listado con los mejores y cuáles son sus características principales así como los pasos principales para que puedas instalarlo sin problema:

Super Progressive Web App

mejores plugins wordpress pwa progressive web app aplicacion web progresiva superpwa
GRATIS

Este plugin permite que tu web sea instalable en los dispositivos móviles de tus usuarios y que el service worker se encargue de ejecutar todas las funciones. No olvides que es imprescindible que la web esté montada en HTTPS para que la PWA sea válida. Tras instalarlo solo tendrás que ir a los ajustes del plugin (SuperPWA > Settings) y rellenar algunos campos necesarios para su activación como el nombre de aplicación. Se recomienda que contemple el mismo nombre que el blog o el sitio web para evitar confusiones.

Super Progessive Web Apps

Onesignal

mejores plugins wordpress pwa progressive web app aplicacion web progresiva onesignal
GRATIS / STARTER ($99/MES) / PRO ($500/MES)

Este plugin puede ser una opción para ti si además estás pensando en enviar campañas de notificaciones push a tus usuarios. Tienes que, por un lado descargar el plugin general y después el que han creado para enviar notificaciones push. Una vez tengas ambos plugins en tu WordPress podrás empezar a completar los pasos para que puedas utilizarlo. Debes darte de alta en su página web para tener acceso a su panel desde donde podrás tener un seguimiento real de la efectividad de las campañas de mensajes push que envíes.

Ir a Onesignal

PWA

mejores plugins wordpress pwa progressive web app aplicacion web progresiva pwa
GRATIS

Este plugin sirve como un punto de conexión con el objetivo de proporcionar soporte a usuarios en WordPress que tienen la intención de que haya una fusión con su web, pieza a pieza. El plugin proporciona una API para detectar si un sitio web podrá soportar el código HTTPS. Después de eso, la única intención u objetivo principal es que esto pueda ser usado para proporcionarle al usuario la posibilidad de cambiar a HTTPS. Además este plugin cuenta con muchas más funcionalidades interesantes.

Ir a PWA

PWA for WP & AMP

mejores plugins wordpress pwa progressive web app aplicacion web progresiva pwaforwpamp
GRATIS

Este plugin es un complemento para la PWA, que logra optimizar el poder de las progressives a WP y AMP para llevar la experiencia del usuario al nivel de muy superior. Consigue que la experiencia de aplicación sea muy similar a la nativa, pero con la diferencia de que esta llevará su sitio web a la pantalla de inicio y funcionará instantáneamente como una aplicación con soporte sin conexión.

Ir a PWA for WP & AMP

WPMobile.App

mejores plugins wordpress pwa progressive web app aplicacion web progresiva wpmobileapp
GRATIS

Con este plugin contarás con una versión de prueba. Lo único que tendrás que hacer es instalar este complemento y luego podrás ver su aplicación móvil tal como estará en su versión final. Además cuenta con un gran porcentaje de compatibilidad con teléfonos inteligentes y tabletas, solo requieren Android 4.1 mínimo y iOS 8, lo que representa la gran mayoría del mercado de teléfonos inteligentes.

Ir a WP Mobile App

WPMobile.App

mejores plugins wordpress pwa progressive web app aplicacion web progresiva progressive wordpress
GRATIS

Este plugin también te ayuda a agregar funciones de aplicaciones web progresivas (PWA) a tu sitio web de WordPress. Además es compatible con Accelerate Mobile Pages (AMP) y es compatible con OneSignal. WordPress progresivo tiene una conexión integrada a Firebase que te permite administrar dispositivos registrados y enviar notificaciones push a todos o dispositivos seleccionados.

Ir a Progressive WP
Plugins de WordPress

Cómo crear una PWA paso a paso para una instalación WordPress

Si todavía no tienes tu sitio web WordPress o estás pensando en hacerlo puede que sea el momento de ponerse manos a la obra y, de paso, empezar con tu PWA. Aunque existen muchas plataformas donde puedes crear sitios web alternativas como Blogger, WordPress, Wix, etc, WordPress es claramente mi favorita (y la de muchas personas). No te cansarás de descubrir todas sus funcionalidades y podrás sacar pleno partido de tus contenidos y suscriptores. Créeme, habla la voz de la experiencia. ¿Me acompañas a conocer los pasos a seguir para instalar tu PWA en WordPress?

#1 Elige el plugin que mejor se adapte a tu instalación e instálalo

Descarga e instala tu plugin de WordPress favorito para poder adaptar y configurar tu sitio web como una aplicación web progresiva. Cualquiera de ellos 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. Una vez instalado y activado cualquiera de los plugins, se mostrará en el menú lateral de WordPress una nueva opción (con el nombre del plugin), mediante la cuál podrás acceder a la configuración del plugin.

Tendrás que introducir el nombre de la aplicación, la descripción, subir el icono, configurar los colores del fondo y del tema, la página de inicio, así como establecer la orientación de la aplicación. Al guardar los ajustes podrás comprobar que el archivo «manifest» ha sido creado por el plugin. También se habrá generado el service worker y se mostrará información sobre el protocolo que utiliza tu web, que recordamos que debe ser https. En definitiva, el plugin hace el trabajo por ti y genera los archivos necesarios para convertir una página web o blog WordPress en una Progressive Web Application o PWA.

#2 Haz una auditoría rápida de tu sitio web

Ya sea para tu sitio web o el de la competencia, tras la instalación de cualquier plugin querrás comprobar si tu sitio web ya aparece o se muestra como una PWA. Para ello, puedes utilizar la herramienta de auditoría de Google Lighthouse. Se trata de una extensión de Google Chrome (no es necesaria su descarga). Puedes realizar la misma consulta desde tu sitio web con tan solo darle al botón derecho de tu ratón y seleccionar «inspeccionar» en el submenú que se despliega.

Tras hacer click se abre un panel en el que tienes que buscar la pestaña correspondiente a «Audits > Perform an Audit«. A continuación elige la casilla de «Progressive Web App» y, finalmente, selecciona «Run Audit» para comenzar. Tras la auditoria, esta herramienta te proporcionará una puntuación sobre 100 y un panel con todas las características o aspectos que puedes mejorar y optimizar para obtener un mejor rendimiento de tu sitio web (ten en cuenta que este tipo de herramientas son totalmente compatibles con AMP). Si utilizas ambas podrás sacarle más provecho a tu rendimiento.

#3 Analiza y haz el seguimiento de las interacciones que ocurren en la PWA.

La mayoría de complementos de WordPress te permiten vincular la actividad de tu PWA con Google Analytics, para así acceder a estadísticas con las que llevar un seguimiento de todos los usuarios y del uso que hacen en la PWA. En primer lugar, este sistema te permitirá conocer la frecuencia de las visitas a páginas sin conexión (muy útil para rastrear cuántos usuarios acceden al servicio sin conexión y priorizar la adición de más funciones sin conexión en consecuencia).

Por otra parte, proporciona información sobre cuántos usuarios han agregando PWA a su pantalla de inicio, clave para comprender cómo los usuarios están reaccionando a la solicitud del navegador y cuán valioso es el servicio para sus usuarios, así como cuántas sesiones se inician desde la pantalla de inicio (agregar un icono a la pantalla de inicio es sólo el primer paso). También debes entender cómo agregar tu servicio a la pantalla de inicio afecta la participación del usuario.

Nota: Asimismo, puedes usar el evento «beforeinstallprompt» para rastrear cuántos usuarios se les pide que agreguen tu sitio web a su pantalla de inicio. Aún mejor, la API permite obtener el resultado de la decisión del usuario. Además, es posible enviar un evento a Google Analytics para rastrear esta información.

Cómo instalar un acceso directo a tu PWA en los navegadores

Por otro lado, existe la posibilidad de crear un acceso directo para tu sitio web. El usuario puede crear ese acceso desde el que se le permite esa web desde su ventana y al uso se comportaría como una aplicación. Es decir, sería una forma de que el usuario, navegando en un sitio web desde su dekstop por ejemplo, quiera tener un acceso directo en su escritorio sin necesidad de estar accediendo continuamente a Internet y escribiendo en la barra del buscador el sitio que desea visitar. Las funciones que aparecerán dentro de esa app depende únicamente del servicio de ese sitio web (hay que tener en cuenta que no todos los sitios ofrecen la posibilidad de Aplicación Web Progressiva).

Cómo un acceso directo a tu PWA en Google Chrome

Para instalarla solo tendrías que acceder a la página web, ir al menú de Google Chrome (que suele tener una apariencia de 3 puntos en sentido vertical) seleccionar «Más herramientas > Crear acceso directo«. Tras esto se abre una ventana emergente que te pregunta si quieres crear un acceso directo y tendrás la posibilidad de cambiar el nombre y modificarlo para darle el que tú quieras además de ofrecerte la opción de abrirla como una ventana (es muy importante que marques la opción de abrir como una ventana antes de finalizar la creación ya que de este modo el acceso a tu app se creará fuera de Chrome).

Después de esto la aplicación se modificará para tener el aspecto de una PWA y se creará el acceso directo tanto si estás en un Mac en el dock o en la barra de tareas de Windows. Finalmente podrás acceder a tu PWA sin tener que acceder en ningún momento a Google Chrome y sin necesidad de que permanezca abierto durante el uso. Siempre que quieras podrás desinstalarla y eliminar el acceso directo.

Cómo instalar un acceso directo a tu PWA en Safari

Si utilizas el navegador de Safari también podrás disfrutar de esta opción. Cuando visites la página web del sitio que quieras solo tendrás que buscar el icono de compartir y al hacer click en él se te abrirá un menú con diferentes opciones como la de añadir a tus favoritos, enviar ese enlace por corro y la opción que te interesa: añadir a pantalla de inicio. Una vez hecho esto tendrás un acceso en tu pantalla desde la cuál podrás acceder a esa página sin necesidad de tener que abrir el navegador que has usado.

Cómo instalar un acceso directo a tu PWA en Firefox

También podrías hacerlo desde el navegador de Firefox. Es muy sencillo. Tras acceder al sitio web deseado, tienes que fijarte en la barra del buscador donde se muestra la URL. En la parte izquierda podrás ver un símbolo con una letra ‘i’ rodeado por un círculo. Solo tendrás que arrastrar ese icono hacia tu escritorio y ya tendrás el acceso directo a la página que has estado visitando.

Impulsa la experiencia de usuario con las Progressive Web Apps

¡Da igual como las llames! PWA, Progressive Web App o Aplicación Web Progresiva. Lo importante es que presentan las mejores características de las aplicaciones nativas y de las páginas web para proporcionar al usuario una experiencia móvil inmejorable gracias al uso de la tecnología web más novedosa. ¿Son las PWA el futuro? Después de haber analizado todas las características y ventajas que tiene para cualquier negocio se puede decir que sí, que una aplicación web progresiva es el futuro, pero sobre todo que es el presente.

Un presente que no puedes dejar escapar si quieres mejorar la experiencia móvil de tus usuarios y conseguir aumentar el engagement y la fidelización de tus clientes. No puedes olvidarte que ahora el mundo es mobile ya que la mayoría de usuarios acceden desde dispositivos móviles y por ello debes ofrecerles las mejores características y funcionalidades. Y es que las PWA han transformado por completo la forma de interactuar de los usuarios con las aplicaciones móviles, por lo que son muchas las empresas que han decidido utilizar una Progressive Web App (incluso están reemplazando sus sitio web o aplicaciones nativas actuales).

¿👀 Buscando Información Sobre #PWA? ¡❌No Busques Más ❌! Qué Son las Aplicaciones Web Progresivas, Mejores Plugins de #WordPress y Cómo Convertir Tu WordPress en #App 📱 Haga clic para Tweet

¿Qué te ha parecido esta guía las PWA? ¿Estás pensado en implementar una aplicación web progresiva en tu instalación WordPress? ¿Sabías que son mejores que tener que desarrollar una app nativa? ¿Hay algo que te haya llamado la atención? ¿Crees que me he dejado alguna cosa? ¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.

También te puede interesar esta guía
tutorial wordpress

WordPress es, sin duda, una de las mejores plataformas para crear una o página web o blog. Es fácil de usar, flexible y con muchas opciones para personalizarla de acuerdo a lo que necesites y más te guste.

Sin embargo, para muchos usuarios que recién comienzan, puede ser un poco abrumador o confuso. Hosting, temas, plugins, SEO, mantenimiento, etc. Son muchas las cosas que implica usar WordPress correctamente.

Ir a la guía