add go bench client
This commit is contained in:
Gilles Soulier
234
docs/FEATURE_HARD_RELOAD_BUTTON.md
Normal file
234
docs/FEATURE_HARD_RELOAD_BUTTON.md
Normal file
@@ -0,0 +1,234 @@
|
||||
# Bouton de rafraîchissement forcé (Hard Reload)
|
||||
|
||||
## Date
|
||||
2026-01-10
|
||||
|
||||
## Contexte
|
||||
|
||||
Lors de modifications du frontend (JS, CSS), le navigateur peut mettre en cache les anciennes versions, nécessitant des manipulations manuelles (Ctrl+F5, vider le cache, etc.). Pour simplifier l'expérience utilisateur, un bouton de rafraîchissement forcé a été ajouté au header.
|
||||
|
||||
## Fonctionnalité
|
||||
|
||||
### Bouton dans le header
|
||||
|
||||
Un bouton **🔄 Rafraîchir** a été ajouté dans la barre de navigation de toutes les pages principales:
|
||||
- `device_detail.html`
|
||||
- `devices.html`
|
||||
|
||||
**Apparence**: Bouton secondaire avec icône 🔄 et texte "Rafraîchir"
|
||||
**Position**: À droite des liens de navigation (Dashboard, Devices, Settings)
|
||||
**Tooltip**: "Recharger sans cache (Ctrl+Shift+R)"
|
||||
|
||||
### Comportement
|
||||
|
||||
Lorsque l'utilisateur clique sur le bouton:
|
||||
|
||||
1. **Vide tous les caches du navigateur**
|
||||
- Cache API (Service Workers)
|
||||
- Cache HTTP du navigateur
|
||||
|
||||
2. **Recharge la page depuis le serveur**
|
||||
- Bypass complet du cache
|
||||
- Équivalent à Ctrl+Shift+R (hard reload)
|
||||
- Force le rechargement de tous les assets (JS, CSS, images)
|
||||
|
||||
## Implémentation
|
||||
|
||||
### HTML - Header
|
||||
|
||||
**Fichier**: `frontend/device_detail.html` (lignes 25-27)
|
||||
**Fichier**: `frontend/devices.html` (lignes 27-29)
|
||||
|
||||
```html
|
||||
<nav class="nav">
|
||||
<a href="index.html" class="nav-link">Dashboard</a>
|
||||
<a href="devices.html" class="nav-link">Devices</a>
|
||||
<a href="settings.html" class="nav-link">Settings</a>
|
||||
<button onclick="hardReload()" class="btn btn-secondary" style="margin-left: 1rem;" title="Recharger sans cache (Ctrl+Shift+R)">
|
||||
🔄 Rafraîchir
|
||||
</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### JavaScript - Fonction hardReload()
|
||||
|
||||
**Fichier**: `frontend/js/device_detail.js` (lignes 9-20)
|
||||
|
||||
```javascript
|
||||
// Hard reload function - force reload without cache
|
||||
function hardReload() {
|
||||
// Clear all caches
|
||||
if ('caches' in window) {
|
||||
caches.keys().then(names => {
|
||||
names.forEach(name => caches.delete(name));
|
||||
});
|
||||
}
|
||||
|
||||
// Force reload from server (bypass cache)
|
||||
window.location.reload(true);
|
||||
}
|
||||
```
|
||||
|
||||
**Fichier**: `frontend/js/devices.js` (lignes 17-28)
|
||||
|
||||
```javascript
|
||||
// Hard reload function - force reload without cache
|
||||
window.hardReload = function() {
|
||||
// Clear all caches
|
||||
if ('caches' in window) {
|
||||
caches.keys().then(names => {
|
||||
names.forEach(name => caches.delete(name));
|
||||
});
|
||||
}
|
||||
|
||||
// Force reload from server (bypass cache)
|
||||
window.location.reload(true);
|
||||
};
|
||||
```
|
||||
|
||||
**Note**: Dans `devices.js`, la fonction est attachée à `window.hardReload` car le code est dans une IIFE (Immediately Invoked Function Expression).
|
||||
|
||||
## Cas d'usage
|
||||
|
||||
### 1. Après une mise à jour du code
|
||||
|
||||
Quand le développeur modifie:
|
||||
- Fichiers JavaScript (`device_detail.js`, `devices.js`, etc.)
|
||||
- Fichiers CSS (`memory-slots.css`, `components.css`, etc.)
|
||||
- Fichiers HTML
|
||||
|
||||
Au lieu de demander à l'utilisateur de:
|
||||
- Appuyer sur Ctrl+Shift+R
|
||||
- Ouvrir les outils développeur
|
||||
- Vider manuellement le cache
|
||||
- Utiliser la navigation privée
|
||||
|
||||
**L'utilisateur clique simplement sur le bouton 🔄**
|
||||
|
||||
### 2. Problèmes d'affichage
|
||||
|
||||
Si l'utilisateur voit un comportement bizarre ou des styles incorrects, il peut facilement forcer le rechargement pour s'assurer qu'il a la dernière version.
|
||||
|
||||
### 3. Tests de développement
|
||||
|
||||
Pour les développeurs testant des modifications, le bouton permet de recharger rapidement sans raccourcis clavier.
|
||||
|
||||
## Avantages
|
||||
|
||||
✅ **UX simplifiée** - Un clic au lieu de manipulations complexes
|
||||
✅ **Visible** - Le bouton est toujours accessible dans le header
|
||||
✅ **Tooltip explicatif** - Indique l'équivalent clavier (Ctrl+Shift+R)
|
||||
✅ **Universel** - Fonctionne sur tous les navigateurs modernes
|
||||
✅ **Vide le cache** - Plus efficace qu'un simple F5
|
||||
✅ **Icône claire** - 🔄 immédiatement reconnaissable
|
||||
|
||||
## Limitations
|
||||
|
||||
⚠️ **Ne persiste pas les données de formulaire** - Les champs remplis seront perdus
|
||||
⚠️ **Recharge complète** - Peut prendre quelques secondes
|
||||
⚠️ **Position dans le scroll** - La page revient en haut après rechargement
|
||||
|
||||
## Alternative: Raccourci clavier
|
||||
|
||||
L'utilisateur peut toujours utiliser:
|
||||
- **Ctrl+Shift+R** (Windows/Linux)
|
||||
- **Cmd+Shift+R** (macOS)
|
||||
- **Ctrl+F5** (Windows/Linux alternative)
|
||||
|
||||
Le bouton offre simplement une méthode visuelle et accessible.
|
||||
|
||||
## Considérations techniques
|
||||
|
||||
### Cache API vs HTTP Cache
|
||||
|
||||
La fonction vide les deux:
|
||||
|
||||
1. **Cache API** (`caches` object)
|
||||
- Utilisé par les Service Workers
|
||||
- Cache programmé du navigateur
|
||||
- Peut persister entre rechargements
|
||||
|
||||
2. **HTTP Cache** (via `reload(true)`)
|
||||
- Cache standard du navigateur
|
||||
- Headers Cache-Control, ETag, etc.
|
||||
- Bypass avec le paramètre `true`
|
||||
|
||||
### Support navigateur
|
||||
|
||||
| Navigateur | Support Cache API | Support reload(true) |
|
||||
|------------|-------------------|----------------------|
|
||||
| Firefox 146+ | ✅ | ✅ |
|
||||
| Chrome 120+ | ✅ | ✅ |
|
||||
| Safari 17+ | ✅ | ✅ |
|
||||
| Edge 120+ | ✅ | ✅ |
|
||||
|
||||
**Compatibilité**: 100% sur navigateurs modernes (2024+)
|
||||
|
||||
## Problème résolu: Cache Docker + Navigateur
|
||||
|
||||
### Contexte du problème
|
||||
|
||||
Lors du développement, deux niveaux de cache pouvaient empêcher de voir les modifications:
|
||||
|
||||
1. **Cache Docker**: Volume monté en read-only (`:ro`)
|
||||
- Un simple `docker restart` ne suffit pas toujours
|
||||
- Il faut `docker compose rm -f` puis `docker compose up -d`
|
||||
|
||||
2. **Cache navigateur**: Fichiers JS/CSS mis en cache
|
||||
- Le navigateur ne recharge pas automatiquement
|
||||
- Nécessite un hard reload manuel
|
||||
|
||||
### Solution complète
|
||||
|
||||
**Côté serveur** (développeur):
|
||||
```bash
|
||||
# Recréer complètement le container
|
||||
docker compose stop frontend
|
||||
docker compose rm -f frontend
|
||||
docker compose up -d frontend
|
||||
```
|
||||
|
||||
**Côté client** (utilisateur):
|
||||
- Cliquer sur le bouton **🔄 Rafraîchir**
|
||||
- Ou appuyer sur **Ctrl+Shift+R**
|
||||
|
||||
## Pages concernées
|
||||
|
||||
- ✅ `device_detail.html` - Détail d'un device
|
||||
- ✅ `devices.html` - Liste des devices
|
||||
- ⬜ `index.html` - Dashboard (à ajouter si nécessaire)
|
||||
- ⬜ `settings.html` - Paramètres (à ajouter si nécessaire)
|
||||
- ⬜ `peripherals.html` - Périphériques (à ajouter si nécessaire)
|
||||
|
||||
## Prochaines améliorations possibles
|
||||
|
||||
1. **Notification visuelle**
|
||||
- Toast "Rechargement en cours..."
|
||||
- Animation de rotation sur l'icône 🔄
|
||||
|
||||
2. **Confirmation avant rechargement**
|
||||
- Si l'utilisateur est en train d'éditer
|
||||
- Modal "Voulez-vous vraiment recharger ?"
|
||||
|
||||
3. **Détection automatique de nouvelles versions**
|
||||
- Vérifier un fichier `version.json` toutes les 5 minutes
|
||||
- Afficher un badge "Mise à jour disponible" sur le bouton
|
||||
|
||||
4. **Mode développeur**
|
||||
- Option pour recharger automatiquement à chaque modification
|
||||
- Websocket pour détecter les changements côté serveur
|
||||
|
||||
## Fichiers modifiés
|
||||
|
||||
1. **frontend/device_detail.html** (lignes 25-27) - Ajout bouton
|
||||
2. **frontend/devices.html** (lignes 27-29) - Ajout bouton
|
||||
3. **frontend/js/device_detail.js** (lignes 9-20) - Fonction hardReload()
|
||||
4. **frontend/js/devices.js** (lignes 17-28) - Fonction hardReload()
|
||||
|
||||
## Conclusion
|
||||
|
||||
Le bouton de rafraîchissement forcé améliore significativement l'expérience utilisateur en rendant le rechargement sans cache accessible et intuitif. Plus besoin de connaître les raccourcis clavier ou de manipuler le cache manuellement.
|
||||
|
||||
**Impact UX**: ⭐⭐⭐⭐⭐ (5/5)
|
||||
**Complexité implémentation**: ⭐ (1/5 - très simple)
|
||||
**Utilité**: ⭐⭐⭐⭐⭐ (5/5 - essentiel en développement)
|
||||
Reference in New Issue
Block a user