Convertir su sitio de WordPress en un PWA: siguiendo la tendencia

El movimiento PWA es un movimiento tan transformador y monumental que se ha convertido en una ola gigante, arrasando el mundo de la tecnología, cambiando todo a su paso para mejor.

Algunas de las marcas más influyentes del mundo, a saber, Twitter con su famoso Twitter Lite , ahora han convertido oficialmente a PWA en la base para sus futuros desarrollos.

 Lectura recomendada: 12 ejemplos de aplicaciones web progresivas para su inspiración

WordPress, o para ser más específicos, Automattic, la gente detrás de WordPress, también inició el movimiento WordPress PWA en Chrome Dev Summit 2017 al anunciar su trabajo en progreso para integrar Progressive Technologies en el flujo de trabajo de plataformas como WordPress.

Desde entonces, el panorama de WordPress ha cambiado tanto que no convertir su WordPress en una PWA es casi una pérdida garantizada en la satisfacción del espectador.

Entendiendo PWA

Como dijo Google, las aplicaciones web progresivas son

• Confiable : cargue instantáneamente y nunca muestre el downasaur, incluso en condiciones de red inciertas.
• Rápido : responda rápidamente a las interacciones del usuario con animaciones suaves como la seda y sin desplazamientos bruscos.
• Atractivo : siéntase como una aplicación natural en el dispositivo, con una experiencia de usuario inmersiva.

En pocas palabras, las PWA son el futuro de la experiencia de navegación web. Para obtener más información sobre las PWA, consulta nuestro artículo: ¿Qué es una PWA?.

¿Por qué PWA para WordPress?

A menos que desee que sus espectadores se aburran hasta la muerte esperando que se cargue su página web, la solución con mayor rendimiento del sitio, funcionalidad y UX es siempre la mejor opción.

Tomemos, por ejemplo, el famoso Twitter Lite. Un estudio de caso ha demostrado que Twitter experimentó un gran cambio en el comportamiento de los usuarios con el lanzamiento de Twitter Lite.

Nicolas Gallagher, líder de ingeniería de Twitter Lite, señala:

Twitter Lite es ahora la forma más rápida, menos costosa y más confiable de usar Twitter. La aplicación web compite con el rendimiento de nuestras aplicaciones nativas, pero requiere menos del 3 % del espacio de almacenamiento del dispositivo en comparación con Twitter para Android.

Y no solo Twitter se unió al movimiento, grandes marcas como Spotify también lo han hecho con su reciente desarrollo de Spotify PWA. Las estadísticas y las noticias relacionadas con los cambios que traen las PWA están en todas partes y son casi demasiado grandes para ignorarlas, lo que hace que la afirmación de un futuro de la Web impulsado por PWA parezca aún más realista que nunca.

Requisitos previos para configurar una PWA en WordPress

• Las aplicaciones web progresivas requieren que su sitio web de WordPress se sirva desde un origen seguro, es decir, su sitio web debe ser HTTPS y no HTTP .
• Versión de WordPress: superior a 3.5.0
• Versión de PHP: superior a 5.3

Cómo convertir su sitio de WordPress en un PWA

Una vez que se cumplen los requisitos previos antes mencionados, los propietarios de sitios de WordPress pueden optar por convertir a PWA utilizando una de las dos formas: Manualmente o Con complementos .

1. Desarrolle manualmente su PWA

El desarrollo de PWA, a pesar de ser menos costoso que otros tipos de desarrollo, aún requiere una cantidad sustancial de conocimiento de codificación y su desarrollador debe conocer los marcos y bibliotecas de Javascript predominantes, especialmente Angular y React. Es por eso que a menudo se recomienda que los propietarios de sitios sin experiencia prueben los complementos (gratuitos y/o pagos) o contraten a un desarrollador profesional, ya que el proceso de creación de una PWA no es fácil.

Al intentar crear una PWA manualmente, recuerde seguir la Lista de verificación de aplicaciones web progresivas de Google y pruebe su página web con la herramienta Lighthouse para obtener la mejor experiencia de usuario posible.

2. Con complementos

¡No se preocupen, propietarios de sitios que no son desarrolladores! WordPress ofrece una amplia variedad de complementos que hacen la mayor parte del trabajo pesado para que sus usuarios elijan. Estos complementos vienen en 2 tipos: complementos gratuitos y de pago.

Complementos gratuitos

1. Súper PWA

En la parte superior de los complementos gratuitos de PWA para WordPress se encuentra SuperPWA con su larga tradición de excelente servicio y calidad.

SuperPWA es fácil de configurar, toma menos de un minuto configurar su aplicación web progresiva. SuperPWA realiza una desinstalación limpia, eliminando todas las entradas y archivos de la base de datos que crea. De hecho, ninguna de las configuraciones predeterminadas se guarda en la base de datos hasta que la guarde manualmente por primera vez.

Instalaciones activas: 30000+
Clasificación de estrellas: ★★★★★

2. PWA

PWA está destinado a proporcionar los componentes básicos de PWA y el mecanismo de coordinación para temas y complementos para no reinventar la rueda y también para no entrar en conflicto entre sí.

Si está desarrollando un complemento o un tema que incluye un trabajador de servicio, considere confiar en este complemento de PWA, o al menos solo use la implementación integrada como alternativa cuando el complemento de PWA no esté disponible.

Última actualización: hace 5 meses
Instalaciones activas: 20,000+
Clasificación de estrellas: ★★★★

3. PWA para WP y AMP

Para una oferta gratuita, PWA para WP y AMP es excelente en lo que hace. Es bueno, fácil de usar y ofrece un servicio al cliente excepcional; sin embargo, su documentación se siente un poco deficiente, lo que puede dificultar que todo funcione.
Instalaciones activas: 8,000+
Clasificación de estrellas: ★★★★★

4. WebSuite PWA

WebSuite PWA es un complemento completo para convertir su sitio web en un PWA con soporte AMP integrado. El complemento viene con varios temas para darle a su PWA una apariencia similar a la de una aplicación, junto con muchas características como Agregar a la pantalla de inicio, Notificaciones automáticas, CDN, Integración de análisis, etc.

Instalaciones activas: 30+

Clasificación de estrellas: ★★★★★

5. PWA simple para WordPress por Webkul

Con solo $ 49, puede convertir su sitio de WordPress en un PWA completamente funcional con todas sus características y ventajas, y eso no es todo. El complemento es compatible con todos los temas de WordPress, además, puede cambiar el tema, el nombre de la aplicación y el ícono de la aplicación desde el backend de administración sin mucho esfuerzo o conocimiento técnico requerido.

Instalaciones activas: información no disponible

Valoración por estrellas: información no disponible

Cómo instalar complementos de PWA

El proceso de instalación de los complementos PWA de WordPress es bastante sencillo y simplificado. A continuación, usaremos SuperPWA como ejemplo:

Instalación de WordPress :

• Visite WordPress Admin> Complementos> Agregar nuevo
• Busque ' Aplicaciones web súper progresivas '
• Haga clic en " Instalar ahora " y luego en " Activar " Aplicaciones web superprogresivas

Para instalar manualmente:

• Cargue la carpeta super-progressive-web-apps en el directorio /wp-content/plugins/ en su servidor
• Vaya a Administración de WordPress > Complementos
• Active el complemento Super Progressive Web Apps de la lista.

Conclusión

Este movimiento de PWA no parece estar desacelerándose en el corto plazo y su mejor apuesta es tomar medidas ahora antes de encontrarse rezagado.

Si eres experto en tecnología y quieres más libertad para ti y para tu sitio, el desarrollo manual de PWA debería ser una opción preferida para ti. Sin embargo, para los propietarios de sitios que no tienen tanta experiencia y desean un método más seguro, probado y probado , los complementos PWA para WordPress no son una mala idea. Los complementos pueden ahorrarle tiempo y dolores de cabeza ocasionales cuando se trata del proceso de creación de una PWA, lo que permite una mejor asignación de recursos.

Otras lecturas:

• Magento PWA Studio: una comparación detallada con Vue Storefront

• Integración de WordPress con Magento: una guía paso a paso