{"section":"tutorials","requestedLocale":"es","requestedSlug":"como-transformar-el-sitio-de-mi-tienda-en-un-pwa","locale":"es","slug":"como-transformar-el-sitio-de-mi-tienda-en-un-pwa","path":"docs/es/tutorials/storefront/layout/como-transformar-el-sitio-de-mi-tienda-en-un-pwa.md","branch":"main","content":"> ℹ️ Este artículo solo es válido para tiendas CMS Portal (Legado).\n\nProgressive 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.\n\n- **Progresiva:** funciona en cualquier navegador.\n- **Responsiva:** se adapta a cualquier dispositivo: escritorio, tablet o móvil.\n- **No depende de conexión a internet:** funciona incluso cuando el usuario está offline.\n- **Similar a la aplicación:** ofrece una experiencia de uso comparable a las aplicaciones nativas.\n- **Actualizada:** no es necesario descargar actualizaciones, ya que el service worker permite que el navegador detecte y realice actualizaciones automáticamente cuando sea necesario.\n- **Segura:** requiere conexión HTTPS.\n- **Interactiva:** permite notificaciones push para interacción con el usuario.\n- **Instalable:** es posible agregar un ícono en la pantalla principal del dispositivo móvil, sin necesidad de acceder a una tienda de aplicaciones.\n- **Compartible:** se puede compartir por URL, sin instalación compleja.\n\nSi 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.\n\n> ⚠️ 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.\n\n## Instrucciones\n\n### Crea el archivo manifest.json\n\nEl 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.\n\nPara crear el archivo JSON, sigue los pasos a continuación:\n\n1. En el Admin VTEX, accede a **Configuración de la tienda > Storefront > Checkout**.\n2. Haz clic en el ícono del engranaje ⚙️ del sitio web deseado.\n3. En la pestaña `Código`, haz clic en `Nuevo`.\n4. Selecciona la opción `Archivo`.\n5. En el campo **Nombre del archivo**, ingresa `manifest.json`.\n6. Ingresa la información de la aplicación (como nombre, ícono y descripción), siguiendo el ejemplo a continuación:\n\n ```json\n {\n \"name\": \"Mi tienda\",\n \"short_name\": \"Tienda\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#fff\",\n \"theme_color\": \"#2F3DB2\",\n \"icons\": [{\n \"src\": \"/archivos/icon.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n }]\n }\n ```\n\n7. Haz clic en `Guardar`.\n\n> ℹ️ **Consejo:** Utiliza íconos con una resolución mínima de 192x192 px y prepara colores hexadecimales que se ajusten a tu identidad visual.\n\n### Agrega el archivo `manifest.json` a la aplicación web\n\nDespués de crear el archivo `manifest.json`, agrega la siguiente fila dentro de la sección `` de tu archivo `index.html`:\n\n```\n\n```\n\nEsto permite que tu aplicación web abra una pantalla de presentación (splash screen) idéntica a la de aplicaciones nativas.\n\n### Crea un service worker\n\nUn 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.\n\nPara crear el script, sigue los pasos a continuación:\n\n1. En el Admin VTEX, accede a **Configuración de la tienda > Storefront > Checkout**.\n2. Haz clic en el ícono del engranaje ⚙️ del sitio web deseado.\n3. En la pestaña `Código`, haz clic en `Nuevo`.\n4. Selecciona la opción `Archivo`.\n5. En el campo **Nombre del archivo**, ingresa `service-worker.js`.\n6. Programa la funcionalidad siguiendo el ejemplo a continuación:\n\n ```js\n // --- CONFIGURACIÓN DE LA CACHÉ ---\n // Define la versión de la caché para facilitar actualizaciones futuras\n\n const CACHE = 'cache-v1';\n\n // Lista de recursos críticos para almacenamiento previo en caché (páginas, CSS, imágenes)\n const FILES = ['/', '/archivos/main.css', '/archivos/logotipo.jpg'];\n\n // --- EVENTO DE INSTALACIÓN ---\n // Se ejecuta una vez cuando se registra el service worker\n\n self.addEventListener('install', (e) => {\n // Abre la caché y almacena los recursos definidos\n e.waitUntil(caches.open(CACHE).then(cache => cache.addAll(FILES)));\n });\n\n // --- EVENTO DE FETCH ---\n // Intercepta todas los requests de red de la página\n\n self.addEventListener('fetch', (e) => {\n // Estrategia cache first:\n // 1. Intenta responder con recurso de la caché\n // 2. Si no lo encuentra, busca en la red\n\n e.respondWith(caches.match(e.request).then(res => res || fetch(e.request)));\n });\n ```\n\n7. Haz clic en **Guardar**.\n\nAunque 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.\n\n> ⚠️ **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.\n\nPara saber más sobre los service workers, consulta la documentación de Google [Web Fundamentals](https://developer.chrome.com/docs/workbox/service-worker-overview?hl=es-419).\n\n### Verifica la implementación de la PWA\n\nPara garantizar el desarrollo correcto de tu sitio web para que funcione como una PWA, utiliza herramientas de inspección, como Google Lighthouse.\n\nPara inspeccionar tu sitio web con Lighthouse, sigue los pasos a continuación:\n\n1. Descarga la extensión de Lighthouse en tu navegador.\n2. Accede al sitio web de tu tienda.\n3. Haz clic en el widget de la herramienta.\n4. Espera el análisis y abre el feedback generado.\n\nPara saber más, consulta la guía [Getting started with Lighthouse](https://developers.vtex.com/docs/guides/storefront-getting-started-with-lighthouse) en VTEX Developer Portal."}