92 lines
2.4 KiB
Markdown
92 lines
2.4 KiB
Markdown
|
# 📸 Resumen: Imágenes en PWA - EMERGES TES
|
||
|
|
|
||
|
|
**Fecha:** 2024-12-19
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## ✅ CONFIGURACIÓN COMPLETADA PARA PWA
|
||
|
|
|
||
|
|
### 1. Service Worker Actualizado
|
||
|
|
- ✅ **Cachea imágenes automáticamente** (cache-first strategy)
|
||
|
|
- ✅ **Detecta rutas** `/assets/infografias/` y las cachea
|
||
|
|
- ✅ **Funciona offline** una vez que las imágenes se cargan
|
||
|
|
|
||
|
|
### 2. Vite Build Configurado
|
||
|
|
- ✅ **Copia `public/`** a `dist/` (incluye imágenes)
|
||
|
|
- ✅ **Mantiene estructura** de carpetas para assets
|
||
|
|
- ✅ **Incluye PNG, JPG, SVG, GIF** en el build
|
||
|
|
|
||
|
|
### 3. Estructura de Carpetas Creada
|
||
|
|
```
|
||
|
|
public/assets/infografias/
|
||
|
|
├── bloque-0-fundamentos/
|
||
|
|
├── bloque-2-inmovilizacion/
|
||
|
|
├── bloque-3-material-sanitario/
|
||
|
|
├── bloque-7-conduccion/
|
||
|
|
└── bloque-12-marco-legal/
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📋 PRÓXIMOS PASOS
|
||
|
|
|
||
|
|
### Paso 1: Mover Imágenes (Manual o Script)
|
||
|
|
|
||
|
|
**Opción A: Script Python (Recomendado)**
|
||
|
|
```bash
|
||
|
|
python scripts/organizar_infografias.py
|
||
|
|
```
|
||
|
|
|
||
|
|
**Opción B: Manual**
|
||
|
|
```bash
|
||
|
|
# Ejemplo: Mover imágenes de collarín
|
||
|
|
cp imagenes-pendientes/colocacion-collarin-paso-*.png public/assets/infografias/bloque-2-inmovilizacion/
|
||
|
|
```
|
||
|
|
|
||
|
|
### Paso 2: Añadir Referencias en Markdown
|
||
|
|
|
||
|
|
Editar archivos `.md` del manual:
|
||
|
|
```markdown
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
### Paso 3: Build y Verificar
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build
|
||
|
|
ls -R dist/assets/infografias/ # Verificar que están en el build
|
||
|
|
```
|
||
|
|
|
||
|
|
### Paso 4: Test Offline
|
||
|
|
|
||
|
|
1. Abrir app en navegador
|
||
|
|
2. Cargar páginas con imágenes (para cachear)
|
||
|
|
3. DevTools > Network > Offline
|
||
|
|
4. Verificar que las imágenes cargan
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎯 ESTADO ACTUAL
|
||
|
|
|
||
|
|
| Aspecto | Estado |
|
||
|
|
|---------|--------|
|
||
|
|
| **Service Worker** | ✅ Configurado para cachear imágenes |
|
||
|
|
| **Vite Build** | ✅ Incluye imágenes en build |
|
||
|
|
| **Estructura carpetas** | ✅ Creada |
|
||
|
|
| **Imágenes organizadas** | ❌ Pendiente (48 en `imagenes-pendientes/`) |
|
||
|
|
| **Referencias en Markdown** | ❌ Pendiente (0 referencias) |
|
||
|
|
| **Funciona offline** | ⚠️ Cuando se completen pasos 1-2 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📝 NOTAS IMPORTANTES
|
||
|
|
|
||
|
|
1. **Las imágenes se cachean automáticamente** cuando se cargan por primera vez
|
||
|
|
2. **No necesitas precachear manualmente** - el SW las cachea bajo demanda
|
||
|
|
3. **Una vez organizadas y referenciadas**, funcionarán offline automáticamente
|
||
|
|
4. **El tamaño total** de imágenes (~8.5MB) es aceptable para PWA
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Conclusión:** La infraestructura está lista. Solo falta organizar las imágenes y añadir referencias en el manual.
|