Bruno Charest
5280dc7a50
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.
183 lines
4.6 KiB
Markdown
183 lines
4.6 KiB
Markdown
# 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.
|