# Installation PWA - Guide Rapide

## 🚀 Démarrage Rapide

ObsiGate est maintenant une Progressive Web App ! Voici comment l'installer et l'utiliser.

## 📋 Prérequis

- Docker et docker-compose installés
- Navigateur moderne (Chrome, Edge, Safari, Firefox)
- HTTPS en production (ou localhost pour le développement)

## 🔧 Installation

### 1. Démarrer ObsiGate

```bash
cd ObsiGate
docker-compose up -d --build
```

### 2. Générer les Icônes (Optionnel)

Les icônes SVG sont déjà générées. Pour les convertir en PNG :

```bash
# Installer ImageMagick ou Inkscape
# Puis exécuter dans frontend/icons/
for file in *.svg; do
  size=$(echo $file | grep -oP '\d+x\d+' | head -1 | cut -d'x' -f1)
  convert -background none -resize ${size}x${size} "$file" "${file%.svg}.png"
done
```

**Note** : Les navigateurs modernes supportent les SVG, cette étape est optionnelle.

### 3. Accéder à l'Application

Ouvrez votre navigateur sur : **http://localhost:2020**

## 📱 Installer l'Application

### Sur Desktop (Chrome, Edge, Brave)

1. Cliquez sur l'icône **➕** ou **⬇️** dans la barre d'adresse
2. Cliquez sur **"Installer ObsiGate"**
3. L'application s'ouvre dans une fenêtre dédiée

### Sur Android

1. Ouvrez le menu **⋮** (trois points)
2. Sélectionnez **"Ajouter à l'écran d'accueil"**
3. Confirmez l'installation
4. L'icône ObsiGate apparaît sur votre écran d'accueil

### Sur iOS/iPadOS

1. Appuyez sur le bouton **Partager** 📤
2. Faites défiler et sélectionnez **"Sur l'écran d'accueil"**
3. Nommez l'application et appuyez sur **"Ajouter"**
4. L'icône ObsiGate apparaît sur votre écran d'accueil

## ✨ Fonctionnalités PWA

### Mode Hors Ligne
- Interface utilisateur accessible sans connexion
- Dernières données consultées disponibles en cache
- Synchronisation automatique au retour en ligne

### Mises à Jour Automatiques
- Vérification toutes les minutes
- Notification élégante quand une nouvelle version est disponible
- Mise à jour en un clic

### Performance
- Chargement instantané grâce au cache
- Réduction de la consommation de données
- Expérience fluide et réactive

## 🔍 Vérification

### Vérifier que le PWA fonctionne

1. Ouvrez **DevTools** (F12)
2. Allez dans l'onglet **"Application"**
3. Vérifiez :
   - **Manifest** : Doit afficher les métadonnées ObsiGate
   - **Service Workers** : Doit montrer un SW actif
   - **Cache Storage** : Doit contenir `obsigate-v1.4.0-static` et `dynamic`

### Tester le Mode Hors Ligne

1. DevTools → Onglet **"Network"**
2. Cochez **"Offline"**
3. Rechargez la page
4. L'application doit fonctionner avec les données en cache

## 🎨 Personnalisation

### Modifier les Couleurs du Thème

Éditez `frontend/manifest.json` :

```json
{
  "theme_color": "#2563eb",        // Couleur de la barre d'état
  "background_color": "#1a1a1a"    // Couleur de fond au lancement
}
```

### Régénérer les Icônes

```bash
python generate_pwa_icons.py
```

Puis personnalisez le script pour vos propres designs.

## 🐛 Dépannage

### L'icône d'installation n'apparaît pas

**Causes possibles** :
- Pas de HTTPS (sauf localhost)
- Manifeste invalide
- Service Worker non enregistré

**Solution** :
```bash
# Vérifier les logs du navigateur
# Console → Rechercher "PWA" ou "Service Worker"
```

### Le mode hors ligne ne fonctionne pas

**Vérification** :
1. DevTools → Application → Service Workers
2. Vérifier que le SW est "activated and running"
3. Vérifier le Cache Storage

**Solution** :
```javascript
// Forcer la mise à jour du SW
navigator.serviceWorker.getRegistration().then(reg => reg.update());
```

### Désinstaller l'Application

**Desktop** :
- Clic droit sur l'icône → "Désinstaller"
- Ou : Menu app → "Désinstaller ObsiGate"

**Mobile** :
- Maintenez l'icône → "Supprimer"
- Ou : Paramètres → Applications → ObsiGate → Désinstaller

## 📚 Documentation Complète

- **`PWA_GUIDE.md`** - Guide complet avec toutes les fonctionnalités
- **`PWA_CHANGELOG.md`** - Liste détaillée des modifications
- **`PWA_SUMMARY.md`** - Résumé technique des implémentations

## ✅ Checklist de Déploiement

- [ ] ObsiGate démarré avec Docker
- [ ] Accessible sur localhost:2020
- [ ] Manifeste visible dans DevTools
- [ ] Service Worker enregistré
- [ ] Cache fonctionnel
- [ ] Mode hors ligne testé
- [ ] Installation testée sur au moins un appareil
- [ ] Audit Lighthouse PWA > 90/100

## 🎉 Félicitations !

Vous avez maintenant ObsiGate en tant que Progressive Web App !

Profitez de vos notes Obsidian partout, même hors ligne. 📖✨

---

**Besoin d'aide ?** Consultez `PWA_GUIDE.md` pour plus de détails.