planetazuzu a313cfe066 fix: Correcciones críticas y mejoras PWA

- Fix: ErrorBoundary movido dentro de BrowserRouter para resolver error de contexto React Router
- Fix: Service Worker actualizado con Promise.allSettled para manejar errores de caché
- Feat: Iconos PWA optimizados (192x192, 512x512, maskable)
- Feat: Scripts de diagnóstico y limpieza de desarrollo
- Feat: Documentación de diagnóstico de errores
- Update: React Router future flags configurados
- Update: Manifest.json con iconos y screenshots configurados
- Clean: Eliminados archivos obsoletos y documentación antigua
- Docs: Actualizado RESUMEN_MANUAL_TES.md y CHECKLIST_PWA_COMPLETA.md

2025-12-23 11:42:44 +01:00

2.9 KiB

Raw Blame History

📸 Guía para Generar Screenshots de la PWA

Los screenshots son importantes para mostrar la aplicación en las tiendas de aplicaciones y mejorar la presentación de la PWA.

📋 Screenshots Requeridos

Según el manifest.json, necesitamos:

Desktop (Wide):
- screenshots/home.png - 1280x720px - Página principal
- screenshots/manual.png - 1280x720px - Manual completo
Mobile (Narrow):
- screenshots/mobile-home.png - 750x1334px - Vista móvil

🛠️ Métodos para Generar Screenshots

Opción 1: Herramientas del Navegador (Recomendado)

Chrome DevTools:

# Abre la aplicación en Chrome
# Presiona F12 para abrir DevTools
# Presiona Ctrl+Shift+P (Cmd+Shift+P en Mac)
# Busca "Capture screenshot"
# Selecciona "Capture full size screenshot"

Firefox DevTools:

# Abre la aplicación en Firefox
# Presiona F12
# Presiona Ctrl+Shift+S (Cmd+Shift+S en Mac)
# Selecciona "Screenshot"

Opción 2: Herramientas de Línea de Comando

Usando Puppeteer (Node.js)

npm install -g puppeteer-cli
puppeteer screenshot --url http://localhost:8607 --width 1280 --height 720 --output screenshots/home.png

Usando Playwright

npx playwright install chromium
npx playwright screenshot --url http://localhost:8607 --width 1280 --height 720 --output screenshots/home.png

Usando wkhtmltoimage

# Instalar: sudo apt-get install wkhtmltopdf
wkhtmltoimage --width 1280 --height 720 http://localhost:8607 screenshots/home.png

Opción 3: Script Automatizado

Crea un script que capture las páginas automáticamente:

// scripts/capturar_screenshots.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Desktop screenshot
  await page.setViewport({ width: 1280, height: 720 });
  await page.goto('http://localhost:8607');
  await page.screenshot({ path: 'public/screenshots/home.png' });
  
  // Manual page
  await page.goto('http://localhost:8607/manual');
  await page.screenshot({ path: 'public/screenshots/manual.png' });
  
  // Mobile screenshot
  await page.setViewport({ width: 375, height: 667 });
  await page.goto('http://localhost:8607');
  await page.screenshot({ path: 'public/screenshots/mobile-home.png' });
  
  await browser.close();
})();

📝 Notas

Los screenshots deben mostrar las mejores características de la aplicación
Usa contenido real, no placeholders
Asegúrate de que la aplicación esté corriendo antes de capturar
Los screenshots se actualizarán automáticamente cuando cambies el contenido

✅ Verificación

Después de generar los screenshots:

Verifica que los archivos existan en public/screenshots/
Verifica que el manifest.json tenga las rutas correctas
Prueba la instalación de la PWA y verifica que los screenshots se muestren

2.9 KiB Raw Blame History