serv_benchmark/docs/FEATURE_HARD_RELOAD_BUTTON.md

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)

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

// 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)

// 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):

# 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)