Las Aplicaciones Web Progresivas están transformando la forma en que los usuarios interactúan con los sitios web. Técnicamente, son una mezcla de lo mejor que pueden ofrecer una aplicación móvil y un sitio web tradicional. Empezar de cero con la tecnología PWA en WordPress no sólo elevará tu nivel un poco, sino que también te permitirá crear una versión más atractiva, accesible y de carga más rápida de tu sitio web.
Esto significa que las empresas, blogueros y creadores digitales pueden conectar mejor con su base de usuarios y ofrecer más contenido que nunca.
Si estás listo para convertir tu sitio web de WordPress en una PWA, has venido al lugar adecuado. Te explicaremos exactamente cómo construir y optimizar estas aplicaciones web, garantizando el éxito de tu próximo proyecto.
¡Manos a la obra!
¿Qué son las PWA?
Las Aplicaciones Web Progresivas son un tipo de tecnología que combina las capacidades de un sitio web tradicional y adaptable con las de una aplicación móvil rica en funciones.
Según Mozilla, las PWA utilizan funciones web modernas para proporcionar una interfaz web similar a una aplicación a la que se puede acceder con un navegador web.
Los tres componentes tecnológicos clave de las PWA son:
- Service workers. Las PWA utilizan scripts que se ejecutan independientemente de un sitio web y ejecutan acciones similares a las que sólo podrían ejecutarse en la página web. Por ejemplo, los service workers permiten las notificaciones push, la sincronización en segundo plano y la disponibilidad offline. Esto último es posible porque los service workers actúan como una red proxy. Las PWA pueden almacenar en caché el contenido y entregarlo cuando no hay conexión, ofreciendo una fiabilidad excepcional incluso en condiciones de red inciertas.
- Manifiesto de la aplicación web. El manifiesto es un archivo JSON que describe la aplicación, lo que le permite presentarse como un icono de añadir a la pantalla de inicio en un smartphone. El archivo está orientado a crear una interacción con el sistema del usuario, incluyendo la URL de inicio, los ajustes de visualización, el nombre descriptivo y los iconos.
- HTTPS. Este último componente es uno de los más cruciales. Aunque no contribuye directamente a la experiencia del usuario, HTTPS aumenta la seguridad, y la privacidad del visitante queda protegida por el cifrado de datos y el anonimato de la información.
La combinación de las tres tecnologías proporciona una experiencia rápida y sin instalaciones, con la PWA totalmente integrada en la página de inicio.
Puedes ver que todas estas piezas encajan a la perfección en el sitio web y la aplicación Cafe Javas.
Desarrollada por TechAhead, esta PWA ofrece una experiencia fluida entre su sitio web y las versiones para móvil de la aplicación. Esto facilita a los clientes hacer pedidos desde sus navegadores web sin la frustrante experiencia de usuario de un sitio web tradicional.
Por qué es buena idea convertir un sitio de WordPress en una PWA
Transformar tu sitio de WordPress en una Aplicación Web Progresiva puede mejorar significativamente tu presencia digital y la experiencia del usuario. Aquí te explicamos por qué hacer el cambio es una decisión brillante:
1. Mayor compromiso del usuario
Una de las numerosas ventajas de las PWA es la posibilidad de enviar notificaciones push. Esto te permite informar a tu audiencia sobre tus últimas noticias y anuncios y, simplemente, asegurarte de que los visitantes de tu sitio web no te olvidan. Esta característica fomenta las visitas regulares y más interacciones.
2. Mayor velocidad del sitio
Las PWA también son extremadamente rápidas. La mayoría de los activos se almacenan en caché, y los service workers ayudan a cargarlos rápidamente. Incluso si los visitantes de tu sitio no tienen el proveedor de red más rápido y fiable, su PWA alimentada por WordPress se cargará al instante. Este aumento de la velocidad no sólo mejora la experiencia del usuario, sino que también contribuye positivamente al posicionamiento en los motores de búsqueda, ya que la velocidad del sitio es un factor de posicionamiento para Google.
3. Capacidades offline
Quizá una de las ventajas más convincentes de las PWA es su capacidad para funcionar sin conexión o en redes de baja calidad. Esto se consigue mediante service workers que almacenan en caché los recursos clave, permitiendo a los usuarios acceder a las páginas visitadas previamente sin conexión a Internet.
4. No se aplican las limitaciones tradicionales
Tanto los sitios web tradicionales como las aplicaciones móviles tienen sus limitaciones. Los sitios web, por ejemplo, dependen en gran medida de la calidad de la red y no ofrecen funcionalidades nativas de las aplicaciones, como las notificaciones push o el acceso sin conexión. Las aplicaciones móviles, por otra parte, requieren que los usuarios descarguen e instalen actualizaciones con regularidad.
Las PWA no tienen estos inconvenientes.
Convertir tu sitio de WordPress en una PWA no es sólo mejorar tu sitio. Es cambiar la forma en que tu público interactúa con él a través de una plataforma más rápida y atractiva que funciona y se ve bien en cualquier dispositivo y con cualquier red.
Requisitos previos para el desarrollo de PWA en WordPress
Cualquiera que quiera crear una PWA para WordPress necesitará saber lo siguiente:
- Diseño UX. Utiliza los principios del diseño UX como punto de partida para hacer de tu PWA algo fácil de usar y con lo que la gente quiera interactuar.
- Conocimientos de HTML y CSS. Tendrás que organizar tus páginas y hacerlas visualmente atractivas y responsivas. Esto requiere conocimientos de HTML y CSS, los componentes básicos del diseño web.
- Conocimientos de PHP. WordPress se basa en PHP, por lo que debes conocer este lenguaje de scripting del lado del servidor para ajustar temas y plugins y añadir otras funcionalidades de contenido dinámico a tu PWA.
- Conocimientos de JavaScript. JavaScript es necesario para manejar la interactividad con tu PWA, trabajar con service workers para la funcionalidad offline, y añadir funcionalidades más complicadas como las notificaciones push, entre otras cosas.
- Familiaridad con WordPress. El proceso de desarrollo será mucho más fácil si entiendes cómo funcionan todos los aspectos de WordPress, sus APIs, la personalización de temas y plugins, la gestión de contenidos y las funciones PHP específicas de WordPress que tienes a tu disposición.
Los Mejores Plugins PWA para WordPress
Si haces una búsqueda rápida de los mejores plugins PWA para WordPress, descubrirás rápidamente una serie de herramientas que pueden mejorar tu sitio web con una funcionalidad similar a la de una aplicación, tiempos de carga más rápidos y otras características impresionantes.
Para quienes deseen crear una PWA rápidamente, aquí tienes varios de los mejores plugins PWA disponibles actualmente para WordPress que podrían acelerar tu flujo de trabajo.
1. Super Progressive Web Apps
Desarrollado por SuperPWA, el plugin Super Progressive Web Apps ofrece a los usuarios de WordPress una forma sencilla de convertir sus sitios web en Aplicaciones Web Progresivas (PWA). Esta fusión de los mejores aspectos de las tecnologías web y de aplicaciones móviles permite el uso sin conexión, tiempos de carga casi instantáneos y acceso desde un acceso directo en la pantalla de inicio.
Pros
- Añadir funciones similares a las de una aplicación, así como la capacidad de proporcionar contenido incluso sin conexión, puede aumentar las visitas al sitio, el compromiso y otros KPI.
- Un rendimiento superior, a través de un menor tiempo de carga y una carga más ligera en un dispositivo, también puede aumentar el valor SEO de un sitio web.
- Fácil de instalar y configurar con ajustes fáciles de usar.
Contras
- Puede ser incompatible con determinados temas o plugins, lo que obliga a realizar más ajustes para que funcione correctamente.
- Las opciones avanzadas disponibles requieren un mayor conocimiento de las tecnologías web para aprovecharlas.
Precios
SuperPWA funciona con un modelo freemium, lo que significa que un conjunto básico de funciones está disponible gratuitamente, con extras accesibles mediante actualizaciones. El primer conjunto de actualizaciones de SuperPWA cuesta a partir de 99 $.
2. PWA for WP & AMP
El plugin PWA for WP & AMP enriquece la experiencia del usuario con una interfaz similar a la de una app, compatibilidad total con AMP PWA, soporte multisitio, seguimiento UTM y la posibilidad de trabajar sin conexión. También proporciona soporte para el desarrollo de service worker, banners de aplicaciones, un manifiesto de aplicación web y una pantalla de inicio personalizada.
Pros
- Mejora el engagement al permitir que tu sitio web sea instalable en la pantalla de inicio.
- Admite AMP
- Incluye caché y analíticas para interacciones offline
Contras
- La configuración es un poco más compleja debido a la integración con AMP
3. PWA
El plugin PWA se centra en los elementos esenciales de la PWA, como los service workers, el manifiesto de aplicación web y la compatibilidad con HTTPS. La PWA está orientada a tiempos de carga más rápidos y a proporcionar una experiencia similar a la de una aplicación en el móvil.
Pros
- Dado que el objetivo de este plugin es que acabe formando parte del core de WordPress, puedes esperar una programación y compatibilidad de alta calidad.
- Ofrece una forma sencilla de adoptar las funciones PWA, aumentando la fiabilidad, velocidad y compromiso de tu sitio web.
Contras
- Las funciones avanzadas no están cubiertas por el plugin y requerirán plugins adicionales o desarrollo personalizado para conseguirlas.
4. Instantify
Instantify se diferencia por combinar tres características clave en una sola plataforma: Aplicaciones Web Progresivas (PWA), Páginas Móviles Aceleradas (AMP, Accelerated Mobile Pages) de Google y Artículos Instantáneos de Facebook (FBIA, Facebook Instant Articles). Con esta combinación, la herramienta transforma tu sitio web para darle un aspecto de aplicación, acelera los tiempos de carga de la web móvil y abre el contenido de tu sitio web a las plataformas sociales.
Pros
- Combinar PWA, AMP y FBIA significa que no tienes que preocuparte de lidiar con diferentes plugins.
- Las páginas AMP tienen preferencia en las búsquedas, por lo que esto podría mejorar potencialmente el rendimiento de tu sitio web en los motores de búsqueda en términos de visibilidad.
- Atrae a los usuarios con notificaciones push y mucho más, y monetiza tu contenido de forma más eficiente mediante anuncios optimizados y Artículos Instantáneos de Facebook.
Contras
- No hay prueba ni plan gratuitos, lo que puede disuadir a los usuarios que quieran probar el plugin antes de pagar por él.
- Las amplias funciones que ofrece pueden hacer que este plugin no funcione bien con algunos temas si no se configura correctamente.
Precios
Instantify cuesta 29 $, una tarifa única para una licencia de por vida. Esto incluye seis meses de soporte, que pueden ampliarse por 21 $ adicionales. El producto no incluye una prueba gratuita ni una garantía de devolución del dinero, por lo que es mejor que consideres detenidamente tus necesidades actuales y tus requisitos de compatibilidad antes de comprarlo.
Cómo crear una PWA con un plugin de WordPress: paso a paso
Crear una PWA con WordPress es una forma interesante de mejorar la experiencia móvil de tu sitio web, haciéndolo más rápido, más fiable y más atractivo. Como ya hemos dicho, las PWA utilizan las capacidades web modernas para ofrecer experiencias similares a las de las aplicaciones a los usuarios directamente desde sus navegadores.
Aquí tienes una miniguía paso a paso sobre cómo transformar tu sitio de WordPress en una PWA utilizando uno de los plugins que hemos comentado.
Paso 1: Planificar tu PWA
Antes de sumergirte en los aspectos técnicos, debes planificar las características y objetivos de tu PWA. Considera qué partes de tu sitio podrían beneficiarse del acceso sin conexión, qué acciones deberían poder realizar los usuarios sin conexión a la red, y cómo te gustaría que se viera tu PWA en la pantalla de inicio. La planificación ayuda a garantizar que tu PWA mejore la experiencia del usuario de forma significativa.
Paso 2: Elegir el plugin adecuado
Como ya hemos comentado, hay varios plugins disponibles para convertir tu sitio de WordPress en una PWA.
Evalúa cada uno en función de tus necesidades específicas. Si buscas una solución sencilla y directa, Super Progressive Web Apps ofrece una configuración fácil. Para quienes necesiten integración entre varias herramientas, Instantify puede ser una opción mejor.
Para nuestro ejemplo de hoy, utilizaremos Super Progressive Web Apps.
Paso 3: Instalar el plugin elegido
Una vez que hayas elegido un plugin, instálalo en tu sitio de WordPress. Para ello, ve a tu panel de WordPress, ve a Plugins > Añadir Nuevo, busca el plugin por su nombre y haz clic en Instalar Ahora. Tras la instalación, haz clic en Activar.
Paso 4: Configura los ajustes
Tras la activación, encontrarás la configuración del plugin en el menú Configuración de tu panel de control de WordPress.
Aquí puedes configurar varios aspectos de tu PWA, como:
-
- Nombre de la aplicación. El nombre de tu PWA tal y como aparecerá en la pantalla de inicio.
- Descripción. Una breve descripción de tu app.
- Página de inicio. La página que tu PWA cargará primero.
- Color del tema. El color de la barra de herramientas.
- Color de fondo. El color de fondo de la pantalla de inicio.
- Icono. Selecciona una imagen para que sirva como icono de tu PWA.
Cuando hayas terminado de hacer modificaciones, haz clic en Guardar Configuración.
Paso 5: Prueba tu nueva PWA
Una vez que hayas configurado los ajustes, es crucial que pruebes tu PWA en diferentes dispositivos. Utiliza Chrome DevTools o herramientas similares para simular varios dispositivos o prueba directamente en tu dispositivo móvil añadiendo tu sitio a la pantalla de inicio.
Por ejemplo, si utilizas un dispositivo iOS, tendrás que borrar la caché de tu navegador móvil antes de visitar tu sitio web.
Haz clic en el botón Compartir y luego en Opciones. Haz clic en Añadir a la Pantalla de Inicio. Cierra el navegador y haz clic en el icono de la aplicación que acabas de añadir a tu pantalla de inicio. Navega por algunas páginas del sitio web, desconéctate de Internet e intenta acceder de nuevo a esas mismas páginas.
Si se cargan, ¡tu PWA está funcionando!
Cómo crear una PWA con WordPress desde cero
Para los que buscan más control y personalización, convertir manualmente tu sitio de WordPress en una PWA puede ser la ruta preferida.
Este método es más técnico y requiere una buena comprensión de los principios del desarrollo web, así que asegúrate de revisar los requisitos previos expuestos anteriormente para confirmar tu capacidad para llevarlo a cabo.
Paso 1: Asegurar HTTPS
Asegurar tu sitio con HTTPS no es negociable para las PWAs. HTTPS cifra los datos entre tu sitio web y sus visitantes, protegiéndolos contra fugas de datos y similares.
Puedes obtener un certificado SSL gratuito de Let’s Encrypt si tu paquete de alojamiento no incluye uno.
El proceso de instalación varía en función de tu proveedor de alojamiento. Muchos ofrecen opciones sencillas de instalación de SSL con un solo clic. Consulta la documentación de soporte de tu proveedor de alojamiento para obtener instrucciones específicas.
Después de instalar tu certificado SSL, asegúrate de que todo el tráfico del sitio web utiliza HTTPS redirigiendo de HTTP a HTTPS. Esto se puede conseguir con un plugin de WordPress como Really Simple SSL o modificando el archivo .htaccess de tu sitio si te sientes cómodo con las ediciones manuales.
2. Crear un manifiesto de aplicación web
El manifiesto de la aplicación web es un archivo JSON que controla cómo se muestra tu PWA a los usuarios y cómo se inicia. Incluye el nombre de tu aplicación, los iconos y la URL de inicio, entre otros ajustes.
Para empezar, crea un archivo JSON llamado manifest.json. Este archivo debe incluir información clave sobre tu aplicación, como su nombre (name), nombre corto (short_name), URL de inicio (start_url), tipo de visualización (display), color de fondo (background_color), color del tema (theme_color) e iconos (
icons).
Este es el aspecto aproximado que debería tener el código, según MDN Web Docs.
{
"name": "Your App Name",
"short_name": "AppShortName",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}Añade un enlace al archivo manifest.json en la sección head de la plantilla de tu sitio de WordPress.
A continuación, utiliza herramientas como Lighthouse de Google para probar y validar la implementación del manifiesto de tu aplicación web.
3. Implementar un service worker
Los service workers actúan como un proxy entre tu aplicación web y el mundo exterior. Son esenciales para la funcionalidad offline, las notificaciones push y el almacenamiento en caché de recursos.
Para crear uno, tendrás que crear un nuevo archivo JavaScript. Llámalo service-worker.js y colócalo en el directorio raíz de tu tema de WordPress. Este archivo contendrá la lógica para almacenar recursos en caché, interceptar peticiones de red y gestionar las capacidades sin conexión.
Tienes que registrar tu service worker desde el JavaScript de tu aplicación web. Normalmente, esto se hace en un archivo JavaScript principal que se ejecuta en tu página web.
Aquí tienes un ejemplo de cómo registrar un service worker desde Borstch:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}En tu archivo service-worker.js, implementa la lógica para almacenar en caché los activos estáticos, interceptar las solicitudes de obtención y servir el contenido desde la caché cuando no estés conectado.
Aquí tienes un ejemplo básico para almacenar en caché algunos activos:
const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});Las pruebas son imprescindibles para asegurarte de que tu service worker se comporta como esperas. Utiliza el panel Aplicación en Chrome DevTools para inspeccionar los service workers registrados, los activos almacenados en caché y mucho más.
Optimizar una PWA de WordPress
Optimizar tu PWA de WordPress es lo último que debes hacer para garantizar velocidad, fiabilidad y funcionalidad. Vamos a sumergirnos en algunas técnicas avanzadas de optimización, centrándonos en las estrategias de almacenamiento en caché, la priorización de recursos y la carga adaptativa para diferentes velocidades de conexión.
Estrategias de almacenamiento en caché
El almacenamiento en caché es un elemento clave de la optimización de las PWA, según Smashing Magazine. Permite que tu aplicación se cargue más rápido almacenando copias de los recursos. Implementar una estrategia de «caché primero» garantiza que tu aplicación obtiene los recursos de la caché antes de probar la red. Este enfoque es especialmente eficaz para los activos estáticos que no cambian a menudo.
Utiliza service workers para almacenar en caché activos importantes durante la fase de instalación. Esto incluye el shell de tu aplicación (HTML, CSS, JavaScript) y cualquier recurso estático.
Para el contenido dinámico, considera estrategias como stale-while-revalidate, que sirve primero el contenido almacenado en caché y luego actualiza la caché con contenido fresco del servidor.
Priorizar los recursos
No todos los recursos son iguales. Algunos son críticos para la renderización inicial, mientras que otros pueden renderizarse mediante carga diferida (lazy loading). Analiza el rendimiento de carga de tu aplicación para identificar qué recursos son esenciales y deben cargarse primero. Puedes utilizar las directivas preload (precargar) y prefetch para informar al navegador sobre estas prioridades:
- Preload. Utilízala para los recursos necesarios en la página actual. Indica al navegador que busque estos recursos al principio del proceso de carga.
- Prefetch. Esto es para recursos que podrían necesitarse en futuras navegaciones. Sugiere al navegador que busque estos recursos cuando esté inactivo.
Carga adaptativa
La carga adaptativa adapta el contenido y las funciones de tu aplicación en función de las capacidades del dispositivo del usuario y de las condiciones de la red. Esta técnica garantiza que tu PWA proporcione una buena experiencia, incluso en redes lentas o inestables.
Implementa la detección de características para servir diferentes activos en función del dispositivo del usuario. Por ejemplo, puedes servir imágenes de alta resolución a los usuarios con una conexión rápida e imágenes más pequeñas y comprimidas a los que tengan una conexión más lenta.
Puedes utilizar la API de Información de Red para detectar la velocidad de conexión del usuario y ajustar el comportamiento de tu aplicación en consecuencia. Por ejemplo, podrías optar por cargar sólo el contenido esencial en una conexión lenta, aplazando los recursos no críticos hasta que mejore la conexión.
Mantén los estándares de Google
Transformar tu sitio de WordPress en una PWA es un movimiento inteligente para mejorar la experiencia del usuario móvil. Pero para que sea eficaz, debes cumplir las normas PWA de Google.
La normativa PWA de Google hacen hincapié en la seguridad, la experiencia del usuario y la accesibilidad:
- Los sitios deben utilizar HTTPS y ser responsivos en dispositivos móviles
- Permitir el acceso sin conexión a las URL de las aplicaciones e incluir metadatos para la función Añadir a la Pantalla de Inicio.
- Deben cargarse rápidamente, funcionar en distintos navegadores y garantizar transiciones de página fluidas sin dependencia de la red.
- Todas las páginas deben mantener URLs únicas.
Resumen
Las aplicaciones web progresivas representan un importante salto adelante en la mejora de la participación del usuario y la accesibilidad en la web. Al integrar las capacidades de los sitios web tradicionales con las funciones avanzadas de las aplicaciones móviles, las PWA ofrecen una experiencia fluida, similar a la de una aplicación, sin necesidad de descargarlas de la tienda de aplicaciones.
Teniendo esto en cuenta, hoy hemos explorado aquí el potencial transformador de las PWA para los sitios de WordPress, destacando sus ventajas y ofreciendo orientación sobre cómo crear la tuya propia utilizando plugins de WordPress o mediante programación manual. Esperamos que te haya resultado útil.
Si aún no lo has hecho, ¿convertirás pronto tu sitio de WordPress en una PWA?
Deja una respuesta