TecnomaniaGT

Tu Solución PWA: Te Hacemos La Vida más Fácil

Herramienta PWA Generator

Ingresa los datos para generar tu PWA con simulación de instalación nativa.

Bienvenido a ${pwaName}

La PWA no está disponible o ya fue instalada. Accede directamente:

Ir al sistema

`; // 2.2. Contenido del archivo manifest.json const manifestJsonContent = `{ "name": "${pwaName}", "short_name": "${pwaName.substring(0, 12)}", "description": "Aplicación Web Progresiva para ${pwaName}", "start_url": "./index.html", "scope": "./", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4f46e5", "icons": [ { "src": "${iconUrl}", "sizes": "192x192", "type": "image/png" }, { "src": "${iconUrl}", "sizes": "512x512", "type": "image/png" } ] }`; // 2.3. Contenido del archivo service-worker.js const serviceWorkerContent = `const CACHE_NAME = 'pwa-cache-v1'; const urlsToCache = [ './', './index.html', './manifest.json', // Si usas una imagen local para el icono, agrégala aquí. ]; // Instalación: Cargar archivos en el caché self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { console.log('Cache abierto, archivos precargados.'); return cache.addAll(urlsToCache); }) ); }); // Fetch: Servir archivos desde el caché self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { // Devolver el archivo del caché si existe if (response) { return response; } // Si no, hacer una petición normal a la red return fetch(event.request); }) ); }); // Activación: Eliminar cachés antiguos self.addEventListener('activate', event => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });`; // 3. Crear el archivo ZIP const zip = new JSZip(); zip.file("index.html", indexHtmlContent); zip.file("manifest.json", manifestJsonContent); zip.file("service-worker.js", serviceWorkerContent); const zipFileName = "pwa_cliente_" + pwaName.replace(/\s/g, "_") + ".zip"; // 4. Generar el blob y descargar zip.generateAsync({ type: "blob" }) .then(function (content) { // --- 1. Construir el contenido de resultados --- const resultsHTML = `

Resultados de la Generación

${zipFileName}

Archivos dentro del ZIP:

${file} Creado correctamente

Instrucciones de Instalación (Para tu Cliente)

Sube los 3 archivos del ZIP a la misma carpeta en tu hosting, y luego comparte el enlace a \`index.html\` (Ej: ${startUrl}index.html) con tu cliente.

Android (Chrome)

Abre el enlace en el navegador **Chrome**.
Espera la aparición del modal de confirmación de **"${pwaName}"**.
Pulsa **"Sí"** e inmediatamente aparecerá la solicitud de instalación nativa. Acéptala.
Comenzará la simulación de descarga (barra de progreso).
Al finalizar, pulsa **"Abrir"** para lanzar la PWA principal.

iOS (Safari)

Asegúrate de que el enlace se abra en el navegador **Safari**.
Pulsa el botón de **Compartir** (el ícono de la flecha hacia arriba) en la barra inferior.
Desplázate hacia abajo y selecciona **"Añadir a pantalla de inicio"**.
Confirma el nombre (**${pwaName}**) y pulsa **"Añadir"**.
La aplicación aparecerá como un ícono nativo en el escritorio.

Desarrollado por ${companyName}

`; // Descargar el archivo ZIP saveAs(content, zipFileName); // Mostrar resultados en la interfaz document.getElementById('results-container').innerHTML = resultsHTML; document.getElementById('results-container').classList.remove('hidden'); statusMessage.textContent = '¡ZIP generado y descargado con éxito!'; statusMessage.classList.remove('text-gray-600', 'text-red-600'); statusMessage.classList.add('text-green-600'); }) .catch(err => { statusMessage.textContent = 'Error al crear el ZIP: ' + err.message; statusMessage.classList.remove('text-gray-600', 'text-green-600'); statusMessage.classList.add('text-red-600'); }) .finally(() => { button.disabled = false; button.innerHTML = ' Generar ZIP y Descargar'; }); }