235 lines
7.2 KiB
Markdown
235 lines
7.2 KiB
Markdown
# 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)
|