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