Si eres un líder técnico o un analista de marketing digital interesado en proporcionar una experiencia web moderna a tu aplicación web Adobe Experience Manager (AEM) y estuviste buscando opciones para hacerlo, entonces llegaste al artículo correcto. Esto abarcará qué son las apps web progresivas (AWP) y qué necesitas para crear una AWP en AEM aprovechando la biblioteca de WorkBox a través de la configuración, sin programación.
¿Por qué usar una AWP?
Las apps web progresivas aprovechan lo que puede hacer la Web moderna. Se pueden instalar en el dispositivo, se cargan rápidamente y las visitas posteriores se cargan de forma instantánea. Responden a las entradas rápidamente. Funcionan bien con una conexión poco confiable o cuando no tienen conexión. Las AWP usan APIs modernas para proporcionar una experiencia atractiva similar a la de una app con una IU de pantalla completa opcional, actualización en segundo plano y acceso sin conexión a los datos.
Para convertir una app web en una Progressive Web App, es necesario agregar dos artefactos:
- Un manifiesto de aplicación web: Un archivo de configuración JSON que define la URL del punto de entrada de la app, el ícono que se usa para representar la AWP y otra configuración que describe el aspecto y el comportamiento de la aplicación.
- Un service worker: una secuencia de comandos que proporciona servicios en segundo plano que enriquecen tu AWP a través de la definición de los recursos que usa la AWP y las estrategias para acceder a ellos.
¿Qué es un service worker?
En esencia, un service worker es una secuencia de comandos que el navegador ejecuta de forma independiente mientras interactúas con tu aplicación web. Un service worker activo brinda servicios como el almacenamiento en caché inteligente usando la API de Cache, la actualización de datos mediante la API de Sincronización en segundo plano y la integración con notificaciones push. Un service worker con la estrategia de almacenamiento en caché correcta proporciona experiencias del usuario estables y confiables para diversas situaciones, mostrando al instante los recursos previamente almacenados en caché, almacenando datos en caché y actualizando recursos cuando se conectan a la Web.
Puede ser difícil escribir trabajadores de servicio desde cero. Se creó Workbox para facilitar el proceso. Workbox es un conjunto de bibliotecas para ayudarte a escribir y administrar service workers y almacenamiento en caché con la API de Cache Storage. Cuando se usan en conjunto, los service workers y la API de Cache Storage controlan cómo se solicitan los recursos (HTML, CSS, JS, imágenes, etc.) desde la red o la caché, lo que incluso te permite devolver el contenido almacenado en caché sin conexión. Con Workbox, puedes configurar y administrar rápidamente ambos servicios y mucho más con código listo para la producción.
Cómo actualizar un sitio de AEM a una AWP
Adobe Experience Manager (AEM) es una solución integral de administración de contenido que sirve para crear sitios web, apps para dispositivos móviles, formularios y señalización digital. Facilita la administración de tus recursos y contenido de marketing.
Si bien AEM proporciona una biblioteca completa para compilar aplicaciones web, hasta ahora era difícil compilar una AWP agregando un service worker y un manifiesto.
Adobe Experience Manager Sites es la herramienta de creación de IU que forma parte de Adobe Experience Manager. Cuando se usa con Adobe Experience Manager como servicio en la nube, AEM Sites facilita la conversión de cualquier sitio web de AEM o aplicación de una sola página en una aplicación web progresiva instalable habilitada sin conexión con solo configuración y sin programación. Usa Workbox para brindar las prácticas recomendadas para Progressive Web Apps y simplifica la complejidad de escribir manifiestos estándares y procesos de trabajo de servicio.
AEM admite la localización de contenido, lo que significa que puedes tener diferentes marcas y contenido sin conexión para diferentes configuraciones regionales. Para ello, compila diferentes configuraciones de AWP para cada instancia principal de lenguaje.
Introducción a la configuración de la AWP en AEM
Accede a Adobe Experience Manager como servicio en la nube y selecciona cualquier página principal de Adobe Experience Manager y propiedades de clics. Deberías ver una pestaña llamada Progressive Web App. (Nota: Si no ves esta pestaña, comunícate con Adobe para habilitar esta función). Puedes configurar la instalación y el aspecto de tus Progressive Web Apps con solo unos clics.
Si completaste instructivos de sitios de AEM, es probable que ya hayas visto el sitio WKND. En este artículo, se utiliza la demostración WKND como punto de partida. Cuando hayas terminado, habrás actualizado WKND de una app web a una AWP con WorkBox.
Cómo configurar el manifiesto
El manifiesto de aplicación web es un archivo JSON que contiene propiedades que describen el aspecto y el comportamiento de una AWP. Los sitios de Adobe Experience Manager ofrecen una interfaz de usuario sencilla para configurar las propiedades.
La URL de inicio es el punto de entrada de tu AWP. Cuando un usuario presione el ícono de la AWP en su teléfono, accederá a la URL de inicio. El modo de visualización configura si la app es una experiencia con ventanas o pantalla completa. También puedes especificar la orientación de la pantalla de la aplicación. El color del tema es el color de la ventana y la barra de herramientas, mientras que el color de fondo es el color de la pantalla de presentación cuando se inicia la aplicación. El ícono es la imagen que se muestra en la pantalla principal de los dispositivos o en el panel lateral de las aplicaciones cuando la aplicación se instala en el dispositivo. La configuración que se muestra en la imagen genera el manifiesto JSON que se muestra a continuación.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
La URL de inicio puede ser diferente de la página de destino predeterminada de tu dominio. Si cambias el parámetro start_url, puedes enviar a tus usuarios directamente a la experiencia de la aplicación en lugar de a la página predeterminada en la que se presenta un usuario nuevo o no autenticado. Esto brinda a los usuarios de AWP una experiencia más fluida y similar a la de una aplicación.
El AEM entiende que las diferentes configuraciones regionales pueden tener un aspecto diferente. Puedes configurar diferentes propiedades, colores e íconos para distintas configuraciones regionales o idiomas y, luego, sincronizar la configuración con las páginas vinculadas.
Una vez que accedas a la AWP en el navegador, puedes hacer clic con el botón derecho para inspeccionar para abrir Herramientas para desarrolladores y ver el manifiesto en el panel Aplicaciones.
Configura el service worker
Puedes configurar el contenido en caché y la estrategia de almacenamiento en caché que se usará.
Si usaste service workers, es posible que conozcas las estrategias de almacenamiento en caché. Las estrategias de almacenamiento en caché especifican qué recursos almacenar en caché y si se deben buscar primero en la caché, primero en la red o en la caché con un resguardo de red. Luego, puedes elegir los recursos para almacenar en caché previamente cuando se instale el service worker. Los service workers de la aplicación de AEM implementan una estrategia de caché templada, lo que significa que la experiencia del usuario no se interrumpirá incluso si especificas una ruta faltante o rota.
En AEM, el término "clientlibs" Se refiere a las bibliotecas del cliente: la combinación de JavaScript, CSS y recursos estáticos relacionados que se agregaron a tu proyecto y que el navegador web del cliente entrega y usa. Puedes configurar fácilmente las bibliotecas del cliente para que se usen sin conexión. Para ello, especifica esas bibliotecas en la interfaz de usuario.
También puedes incluir recursos de terceros, como fuentes. Esta configuración de caché sin conexión proporciona información de configuración a un service worker que se genera para tu aplicación y que usa la caja de trabajo internamente. Eso es casi todo lo que hay que hacer para que tu aplicación se pueda instalar. Una vez instalada, el ícono de la aplicación aparecerá en la pantalla principal del dispositivo móvil, al igual que una aplicación de plataforma. Al hacer clic en el icono, accederás al sitio de wknd.
Ten en cuenta que puedes cambiar tu contenido o esta configuración en cualquier momento. Cuando publiques los cambios, el navegador actualizará el service worker en el cliente y le mostrará un mensaje al usuario que indica que hay una versión más reciente de la AWP. El usuario puede hacer clic en el mensaje para volver a cargar la aplicación y obtener las actualizaciones más recientes. Puedes abrir el panel de aplicaciones y herramientas para desarrolladores del navegador para ver los detalles del service worker.
Puedes expandir el almacenamiento en caché para ver el contenido que se almacenó en caché localmente:
Los resultados
Es hora de analizar los resultados de tu arduo trabajo. Con solo configuración y sin programación, acabas de mejorar tu sitio de AEM para que se convierta en una app web progresiva.
Las herramientas para desarrolladores de Chrome ofrecen una auditoría básica que te permite comprobar si tu aplicación web y su configuración cumplen con los estándares de las apps web progresivas.
Conclusión
Las Progressive Web Apps proporcionan una experiencia similar a la de las aplicaciones para tu sitio web, que utiliza la naturaleza abierta y multiplataforma de la Web con un menor costo de desarrollo y mantenimiento, a la vez que ofrece control sobre la distribución. Esto mejora la participación, la retención y, lo que es más importante, genera porcentajes de conversiones más altos. AEM, junto con Workbox, facilita la mejora de tu sitio existente y convertirlo en una AWP con solo configuración y sin programación.
Referencias
- Instructivo de WKND
- Service Workers
- API de Cache
- Manifiesto de la aplicación web
- Compatibilidad con íconos adaptables en AWP con íconos enmascarables
- Más información sobre los sitios de Adobe Experience Manager
- Más información sobre Workbox:
- Estrategias de almacenamiento en caché de la caja de trabajo:
- Más información sobre las apps web progresivas