ObsiGate/INSTALLATION_PWA.md

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

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 :

# 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 :

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

Régénérer les Icônes

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 :

# 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 :

// 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.