Este artículo solo es válido para tiendas CMS Portal Legado.
Progressive Web App (PWA) es un conjunto de técnicas utilizadas para desarrollar aplicaciones web y utilizar funcionalidades que de otro modo estarían restringidas a aplicaciones nativas.
- Progresiva: funciona en cualquier navegador.
- Responsiva: se adapta a cualquier dispositivo: escritorio, tablet o móvil.
- No depende de conexión a internet: funciona incluso cuando el usuario está offline.
- Similar a la aplicación: ofrece una experiencia de uso comparable a las aplicaciones nativas.
- Actualizada: no es necesario descargar actualizaciones, ya que el service worker permite que el navegador detecte y realice actualizaciones automáticamente cuando sea necesario.
- Segura: requiere conexión HTTPS.
- Interactiva: permite notificaciones push para interacción con el usuario.
- Instalable: es posible agregar un ícono en la pantalla principal del dispositivo móvil, sin necesidad de acceder a una tienda de aplicaciones.
- Compartible: se puede compartir por URL, sin instalación compleja.
Si ya tienes un sitio o aplicación web, puedes implementar poco a poco las características que definen una PWA, como notificaciones, caché de archivos, ejecución offline y otras cosas que hagan al usuario sentirse como si estuviera utilizando una aplicación nativa.
VTEX no ofrece soluciones nativas para conversión a PWA en el CMS Portal Legado, aunque sí tiene la infraestructura básica para una implementación manual. Las tiendas desarrolladas con VTEX IO Store Framework tienen este recurso de forma nativa.
Instrucciones
Crea el archivo manifest.json
El archivo manifest.json de una aplicación web proporciona información sobre la aplicación (como nombre, autor, ícono y descripción) en un archivo de texto JSON. Se crea para transformar una aplicación web en una entidad que se puede instalar en un smartphone.
Para crear el archivo JSON, sigue los pasos a continuación:
-
En el Admin VTEX, accede a Configuración de la tienda > Storefront > Checkout.
-
Haz clic en el ícono del engranaje ⚙️ del sitio web deseado.
-
En la pestaña
Código, haz clic enNuevo. -
Selecciona la opción
Archivo. -
En el campo Nombre del archivo, ingresa
manifest.json. -
Ingresa la información de la aplicación (como nombre, ícono y descripción), siguiendo el ejemplo a continuación:
{"name": "Mi tienda","short_name": "Tienda","start_url": "/","display": "standalone","background_color": "#fff","theme_color": "#2F3DB2","icons": [{"src": "/archivos/icon.png","sizes": "192x192","type": "image/png"}]} -
Haz clic en
Guardar.
Consejo: Utiliza íconos con una resolución mínima de 192x192 px y prepara colores hexadecimales que se ajusten a tu identidad visual.
Agrega el archivo manifest.json a la aplicación web
Después de crear el archivo manifest.json, agrega la siguiente fila dentro de la sección <head> de tu archivo index.html:
<link rel="manifest" href="/arquivos/manifest.json">
Esto permite que tu aplicación web abra una pantalla de presentación (splash screen) idéntica a la de aplicaciones nativas.
Crea un service worker
Un service worker es un script que el navegador ejecuta en segundo plano, separado de la web, que habilita recursos como sincronización periódica, notificaciones push y ejecución offline.
Para crear el script, sigue los pasos a continuación:
-
En el Admin VTEX, accede a Configuración de la tienda > Storefront > Checkout.
-
Haz clic en el ícono del engranaje ⚙️ del sitio web deseado.
-
En la pestaña
Código, haz clic enNuevo. -
Selecciona la opción
Archivo. -
En el campo Nombre del archivo, ingresa
service-worker.js. -
Programa la funcionalidad siguiendo el ejemplo a continuación:
// --- CONFIGURACIÓN DE LA CACHÉ ---// Define la versión de la caché para facilitar actualizaciones futurasconst CACHE = 'cache-v1';// Lista de recursos críticos para almacenamiento previo en caché (páginas, CSS, imágenes)const FILES = ['/', '/archivos/main.css', '/archivos/logotipo.jpg'];// --- EVENTO DE INSTALACIÓN ---// Se ejecuta una vez cuando se registra el service workerself.addEventListener('install', (e) => {// Abre la caché y almacena los recursos definidose.waitUntil(caches.open(CACHE).then(cache => cache.addAll(FILES)));});// --- EVENTO DE FETCH ---// Intercepta todas los requests de red de la páginaself.addEventListener('fetch', (e) => {// Estrategia cache first:// 1. Intenta responder con recurso de la caché// 2. Si no lo encuentra, busca en la rede.respondWith(caches.match(e.request).then(res => res || fetch(e.request)));}); -
Haz clic en Guardar.
Aunque esté ubicado en /archivos/service-worker.js, el archivo recibe el encabezado Service-Worker-Allowed con valor /, lo que permite interceptar requests de la raíz del sitio web.
Atención: El service worker solo funciona en entornos HTTPS. Siempre debes realizar pruebas en producción o utilizar tunnels seguros en el entorno de desarrollo.
Para saber más sobre los service workers, consulta la documentación de Google Web Fundamentals.
Verifica la implementación de la PWA
Para garantizar el desarrollo correcto de tu sitio web para que funcione como una PWA, utiliza herramientas de inspección, como Google Lighthouse.
Para inspeccionar tu sitio web con Lighthouse, sigue los pasos a continuación:
- Descarga la extensión de Lighthouse en tu navegador.
- Accede al sitio web de tu tienda.
- Haz clic en el widget de la herramienta.
- Espera el análisis y abre el feedback generado.
Para saber más, consulta la guía Getting started with Lighthouse en VTEX Developer Portal.