Cache : comment se débarrasser du cache navigateurs durant le dév ?

Bonjour,

Bon, cette question me me fait vraiment souffrir car ça fait des mois que ça dure et je ne suis pas parvenu à trouver une seule réponse fiable.

Le problème : Chaque fois que j'effectue une modif CSS, je dois vider le cache de mes navigateurs pour visualiser le résultat (Chrome, Safari, Firefox).

Bien entendu, je connais la solution manuelle pour vider les caches de ces navigateurs mais c'est vraiment fastidieux d'autant que ça me déconnecte de l'admin Wordpress.

Pour Chrome, mon navigateur de travail, j'ai même désactivé le cache dans les outils dév : "Network > Disable cache" mais ça ne change rien.
J'ai également tenté la désactivation de tous mes plugins et l'utilisation du theme Wordpress par défaut.

Aujourd'hui, j'ai acheté un hébergement Cloud Web OVH qui est censé être une voiture de course, il ne devrait pas y avoir de relation avec le cache, pourtant, il est devenu encore plus important et seul le vidage de cache de Chrome me permet de visualiser mon travail dans un délai "acceptable".

Pour le autres navigateurs, je dois attendre pas mal de temps pour que le cache se vide automatiquement après même que j'ai vidé le cache manuellement...

Pour info, je développe des petits sites : sous Mac + OVH + Wordpress + plugins fiables et limités

Tu dois indiquer au navigateur que tu ne veux pas qu'il n'y ait de cache

header("Cache-Control: no-cache, must-revalidate");

Modifié par JohnNes (13 Oct 2018 - 19:57)

Attention à ne pas le désactiver pour tout le monde.

On peut également spécifiquement envoyer des instructions HTTP selon le profil de connexion.

Sous Chrome il y a l'option "Disable cache" pendant que les devtools sont ouverts.



Sinon le raccourci Ctrl (ou Cmd sur macOS) + Shift + R produit assez souvent son effet car il envoie justement des instructions pour ignorer le cache.
Modifié par dew (13 Oct 2018 - 21:04)

JohnNes
Vraiment merci ! J'ai ajouter ce cache control dans mon header.php et il semble que ça fonctionne vraiment bien, je vais juste tester encore demain pour faire la fête

Dew
Merci également mais quel est le risque si je désactive le cache pour tout le monde ?
Je précise que l'hébergement concerné est très performant (dédié+disque SSD).
Concernant la désactivation du cache dans Chrome, j'avais déjà testé sans succès. Le raccourci cmd+shift+R ne fonctionnait bizarrement pas non plus, d'où ma forte contrariété.

Mais bon, un grand merci, Alsacreation me sauve encore la mise, top !

JohnNes
Houps, je me suis réjouis un peu vite et je n'ai pas inséré
header("Cache-Control: no-cache, must-revalidate");
au bon endroit soit la page header.php entre les balises head
Pourrais-tu me préciser où je dois l'insérer stp ?

dew
Pourrais-tu me confirmer que nous parlons bien du même paramètre de cache stp (capture) ?

Sinon, j'ai noté une possibilité avec .htaccess :

# DISABLE CACHING
<IfModule mod_headers.c>
	Header set Cache-Control "no-cache, no-store, must-revalidate"
	Header set Pragma "no-cache"
	Header set Expires 0
</IfModule>

Est-ce une option valable ?
Après est-ce que la ligne Header set Expires 0 indique une durée paramétrable...?

Avec Firefox, j'utilise l'extension clearcache.
Avec la souris, on clique sur une icône à côté de la barre d'adresse et cela efface le cache et recharge la page. très pratique pour le CSS et Javascript
https://github.com/TenSoja/clear-cache
Pour installer : dans le menu, cliquer sur "modules compémentaires" et rechercher clearcache

Merci pour conseils pros. J'ai récupéré clearcache pour Google mais je pense que son effet est comparable à cmd+shift+R (mac)
Mais sile cache se vide au reload, c'est toujours quelques secondes gagnées par manip.

Concernant l'onglet Network > Disable cache, je l'ai activé depuis longtemps mais bizarrement, il n'a jamais vraiment fonctionné. Entendu qu'il ne s'active qu'à l'affichage des outils dev.

Sinon, je confirme que le petit htaccess ci-dessus fait bien le boulot, en une seule fois pour tous les navigateurs et il est rapide à désactiver une fois le site en prod.

Tu peux leurrer le navigateur grâce à la fonction time() de php associée à une variable t (par exemple)...

<head>
// méta balises and co...+
<?php
echo "<link href=\"style.css?t=".time()."\" rel=\"stylesheet\">";
?>
</head>

Chaque seconde qui passe le navigateur se retrouve face à une page qu'il interprète comme différente de celle mise en cache. Et donc il recharge sans barguigner.

Tout bête, mais radical en l'état actuel des choses!

\C/
Modifié par cornflowerblue (01 Nov 2018 - 20:17)