Si eres líder técnico o analista de marketing digital y te interesa proporcionar una experiencia web moderna a tu aplicación web de Adobe Experience Manager (AEM) y buscaste opciones para hacerlo, estuviste en el artículo correcto. Esto abarcará qué son las apps web progresivas (AWP) y qué necesitas para crear una AEM en AEM aprovechando la biblioteca de WorkBox a través de la configuración, sin programación.
¿Por qué elegir una AWP?
Las apps web progresivas aprovechan lo que puede hacer la Web moderna. Se pueden instalar en tu dispositivo, se cargan rápido y las visitas posteriores se cargan al instante. Responden a las entradas rápidamente. Funcionan bien con una conexión poco confiable o sin conexión. Las AWP usan APIs modernas para proporcionar una experiencia atractiva similar a la de la app con una IU de pantalla completa opcional, actualización en segundo plano y acceso sin conexión a los datos.
Para mejorar una aplicación web y convertirla en una Progressive Web App, es necesario agregar dos artefactos:
- Un manifiesto de aplicación web: Es un archivo de configuración JSON que define la URL del punto de entrada de la aplicación, el ícono que representa la AWP y otra configuración que describe el aspecto y el comportamiento de la aplicación.
- Un service worker: Es una secuencia de comandos que proporciona servicios en segundo plano que enriquecen tu AWP definiendo los recursos que esta usa y las estrategias para acceder a ellos.
¿Qué es un service worker?
En esencia, un service worker es solo una secuencia de comandos que el navegador ejecuta de manera independiente mientras interactúas con tu aplicación web. Un service worker activo ofrece servicios como almacenamiento en caché inteligente con la API de caché, mantiene los datos actualizados con la API de sincronización en segundo plano y realiza integraciones con notificaciones push. Un service worker con la estrategia de almacenamiento en caché correcta proporciona experiencias del usuario estables y confiables para varias situaciones, devuelve recursos prealmacenados en caché al instante, almacena datos en caché y actualiza recursos cuando se conecta a la Web.
Los service workers pueden ser difíciles de escribir desde cero. Workbox se creó para facilitar el proceso. Workbox es un conjunto de bibliotecas que te ayuda a escribir y administrar service worker 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 mostrar contenido almacenado en caché cuando no hay conexión. Con Workbox, puedes configurar y administrar rápidamente ambos, 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 de administración de contenido integral para crear sitios web, apps para dispositivos móviles, formularios y señalización digital. Facilita la administración de tu contenido y tus recursos de marketing.
Si bien AEM proporciona una biblioteca enriquecida para crear aplicaciones web, hasta ahora ha sido difícil compilar una AWP agregando un service worker y un manifiesto.
Adobe Experience Manager Sites es la herramienta de compilación de IU que forma parte de Adobe Experience Manager. Cuando se usa con Adobe Experience Manager como un servicio en la nube, AEM Sites facilita la conversión de cualquier sitio web de AEM existente o aplicación de una sola página en una aplicación web progresiva instalable y habilitada sin conexión con solo configuración y sin programación. Usa Workbox para proporcionar las prácticas recomendadas para las apps web progresivas y abstrae las complejidades de la escritura de manifiestos estándar y service worker.
AEM admite la localización de contenido, lo que significa que puedes tener un desarrollo de la marca diferente y hasta contenido sin conexión distinto para cada configuración regional. Para ello, crea diferentes configuraciones de AWP para cada lenguaje principal.
Primeros pasos con la configuración de las AWP en AEM
Accede a Adobe Experience Manager como servicio en la nube y selecciona cualquier página de Adobe Experience Manager o un idioma principal y haz clic en Propiedades. Deberías ver una pestaña llamada Progressive Web App. (Nota: Si no la ves, comunícate con Adobe para habilitar esta función). Puedes configurar la instalación y el aspecto de tus Progressive Web Apps con tan solo unos clics.
Si completaste instructivos de AEM Sites, es probable que ya hayas visto el sitio de WKND antes. En este artículo, se utiliza la demostración de 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 del Administrador de experiencia de Adobe proporcionan 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 de la ventana y la barra de herramientas, mientras que el color de fondo es el de la pantalla de presentación cuando se inicia la aplicación. El ícono es la imagen que se muestra en la pantalla de inicio del dispositivo o en el panel lateral de 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 la página predeterminada en la que se presentaría un usuario nuevo o no autenticado. Esto brinda a los usuarios de AWP una experiencia más fluida, similar a la de una app.
La AEM comprende que cada región puede tener un aspecto distinto. Puedes configurar diferentes propiedades, colores e íconos para diferentes configuraciones regionales o idiomas y, a continuación, sincronizar la configuración con las páginas vinculadas.
Una vez que se accede a la AWP desde el navegador, puedes hacer clic con el botón derecho y, luego, inspeccionarla para abrir Herramientas para desarrolladores y ver el manifiesto en el panel Aplicaciones.
Configura el service worker
Puedes configurar el contenido que se almacenará en caché y la estrategia de almacenamiento en caché que se utilizará.
Si usaste service worker, 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. A continuación, puedes elegir los recursos que deseas almacenar en caché previamente cuando se instale el service worker. Los service worker de aplicaciones de AEM implementan una estrategia de caché semicaliente, lo que significa que la experiencia del usuario no se interrumpirá, incluso si especificas una ruta faltante o dañada.
En AEM, el término "clientlibs" hace referencia 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 utiliza. Puedes configurar fácilmente las bibliotecas del cliente para usarlas 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 usa Workbox 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 de inicio de tu dispositivo móvil, tal como ocurre en una aplicación de plataforma. Si haces clic en el ícono, se accederá al sitio de Wknd.
Ten en cuenta que puedes cambiar tu contenido o estas opciones en cualquier momento. Cuando publiques tus cambios, el navegador actualizará el service worker en el cliente y se le mostrará un mensaje al usuario en el que se indicará que hay una versión más reciente de la AWP disponible. 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 herramientas y aplicaciones para desarrolladores del navegador a fin de ver los detalles del service worker.
Puedes expandir el almacenamiento en caché para ver el contenido almacenado en la 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 de prueba que te permite comprobar si tu aplicación web y configuración cumplen con los estándares de las aplicaciones web progresivas.
Conclusión
Las apps web progresivas brindan 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 proporciona 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 en conjunto con Workbox te permite mejorar fácilmente tu sitio existente 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 del Administrador de experiencias de Adobe
- Más información sobre Workbox:
- Estrategias de almacenamiento en caché en cajas de trabajo:
- Más información sobre las apps web progresivas