Bruno Charest 5280dc7a50 Add comprehensive documentation and analysis files

Add extensive project documentation including analysis review, image
rendering changelog and guide,
contributing guidelines, hidden files configuration guide, PWA
documentation suite, roadmap, and
dashboard specification.

2026-05-26 08:35:58 -04:00

4.6 KiB

Raw Permalink Blame History

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)

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

Sur Android

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

Sur iOS/iPadOS

Appuyez sur le bouton Partager 📤
Faites défiler et sélectionnez "Sur l'écran d'accueil"
Nommez l'application et appuyez sur "Ajouter"
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

Ouvrez DevTools (F12)
Allez dans l'onglet "Application"
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

DevTools → Onglet "Network"
Cochez "Offline"
Rechargez la page
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 :

DevTools → Application → Service Workers
Vérifier que le SW est "activated and running"
Vérifier le Cache Storage