planetazuzu
a313cfe066
- 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
102 lines
2.9 KiB
Markdown
102 lines
2.9 KiB
Markdown
# 📸 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:
|
|
|
|
1. **Desktop (Wide):**
|
|
- `screenshots/home.png` - 1280x720px - Página principal
|
|
- `screenshots/manual.png` - 1280x720px - Manual completo
|
|
|
|
2. **Mobile (Narrow):**
|
|
- `screenshots/mobile-home.png` - 750x1334px - Vista móvil
|
|
|
|
## 🛠️ Métodos para Generar Screenshots
|
|
|
|
### Opción 1: Herramientas del Navegador (Recomendado)
|
|
|
|
1. **Chrome DevTools:**
|
|
```bash
|
|
# 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"
|
|
```
|
|
|
|
2. **Firefox DevTools:**
|
|
```bash
|
|
# 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)
|
|
```bash
|
|
npm install -g puppeteer-cli
|
|
puppeteer screenshot --url http://localhost:8607 --width 1280 --height 720 --output screenshots/home.png
|
|
```
|
|
|
|
#### Usando Playwright
|
|
```bash
|
|
npx playwright install chromium
|
|
npx playwright screenshot --url http://localhost:8607 --width 1280 --height 720 --output screenshots/home.png
|
|
```
|
|
|
|
#### Usando wkhtmltoimage
|
|
```bash
|
|
# 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:
|
|
|
|
```javascript
|
|
// 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:
|
|
|
|
1. Verifica que los archivos existan en `public/screenshots/`
|
|
2. Verifica que el manifest.json tenga las rutas correctas
|
|
3. Prueba la instalación de la PWA y verifica que los screenshots se muestren
|
|
|