Effacer le cache en JavaScript

Question

Comment vider le cache d'un navigateur avec JavaScript ?

Nous avons déployé le dernier code JavaScript mais nous ne parvenons pas à obtenir le dernier code JavaScript.

Note de la rédaction : Cette question est semi-dupliquée aux endroits suivants, et la réponse de la première des questions suivantes est probablement la meilleure. Cette réponse acceptée n'est plus la solution idéale.

Comment forcer le navigateur à recharger les fichiers CSS/JS mis en cache ?

Comment puis-je obliger les clients à rafraîchir les fichiers JavaScript ?

Rechargement dynamique de la source locale Javascript / données json

Answer 1

Peut-être "effacer le cache" n'est pas aussi facile qu'elle devrait l'être. Au lieu de vider le cache de mes navigateurs, j'ai réalisé que "touchant" le fichier changera réellement la date du fichier source mis en cache sur le serveur (testé sur Edge, Chrome et Firefox) et la plupart des navigateurs téléchargeront automatiquement la copie la plus récente de ce qui se trouve sur votre serveur (code, graphiques et multimédia). Je vous suggère de copier les scripts les plus récents sur le serveur et de les mettre à jour. "faites le geste qui touche" avant que votre programme ne s'exécute, de sorte qu'il modifie la date de tous vos fichiers à problèmes pour qu'elle soit la plus récente, puis il télécharge une nouvelle copie sur votre navigateur :

<?php
    touch('/www/control/file1.js');
    touch('/www/control/file2.js');
    touch('/www/control/file2.js');
?>

...le reste de votre programme...

Il m'a fallu un certain temps pour résoudre ce problème (car de nombreux navigateurs agissent différemment selon les commandes, mais ils vérifient tous l'heure des fichiers et la comparent à la copie que vous avez téléchargée dans votre navigateur, si la date et l'heure sont différentes, ils procéderont à l'actualisation). Si vous ne pouvez pas suivre la voie supposée correcte, il existe toujours une autre solution utilisable et meilleure. Meilleures salutations et bon camping.

Answer 2

Veuillez ne pas donner d'informations incorrectes. Cache api est un type de cache différent de cache http

Cache HTTP est déclenché lorsque le serveur envoie le bon en-têtes à laquelle vous ne pouvez pas accéder avec javasvipt.

Cache api d'autre part, est déclenché quand vous le voulez, c'est utile quand on travaille avec les travailleur des services vous pouvez donc croiser les demandes et y répondre à partir de ce type de cache. voir : Illustration 1 Illustration 2 cours

Vous pouvez utiliser ces techniques pour avoir toujours un contenu frais pour vos utilisateurs :

1. Utilisez location.reload(true) cela ne fonctionne pas pour moi, donc je ne le recommanderais pas.
2. Utilisez Cache api afin d'enregistrer dans le cache et d'intersecter les demande avec travailleur des services soyez prudent avec celui-ci car si le serveur a envoyé le en-têtes de cache pour les fichiers que vous voulez pour rafraîchir, le navigateur répondra d'abord à partir du cache HTTP, et s'il ne le trouve pas, il ira sur le réseau, donc vous pourriez vous retrouver avec un vieux fichier.
3. Changez l'url de vos fichiers stactiques, ma recommandation est que vous devriez le nommer avec le changement du contenu de vos fichiers, j'utilise md5 et ensuite le convertir en chaîne de caractères et en url friendly, et le md5 changera avec le contenu du fichier, là vous pouvez librement envoyer des en-têtes de cache HTTP assez longtemps.

Je recommande le troisième. voir

Answer 3

J'ai eu quelques problèmes avec le code suggéré par yboussard. La boucle j interne n'a pas fonctionné. Voici le code modifié que j'utilise avec succès.

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}

Answer 4

Si vous utilisez php, vous pouvez le faire :

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>

Answer 5

Vous pouvez également désactiver la mise en cache du navigateur à l'aide de balises méta HTML. Il suffit de placer des balises html dans la section head pour éviter que la page Web ne soit mise en cache pendant que vous codifiez/testez et, lorsque vous avez terminé, vous pouvez supprimer les balises méta.

(dans la section tête)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/>

Rafraîchissez votre page après avoir collé ceci dans l'en-tête et le nouveau code javascript devrait également être rafraîchi.

Ce lien vous donnera d'autres options si vous en avez besoin. http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

ou vous pouvez simplement créer un bouton comme ceci

<button type="button" onclick="location.reload(true)">Refresh</button>

il se rafraîchit et évite la mise en cache mais il sera là sur votre page jusqu'à ce que vous ayez fini de tester, alors vous pouvez l'enlever. La première option est la meilleure à mon avis.