Vider le cache en JavaScript

Comment vider le cache d'un navigateur avec JavaScript?

Nous avons déployé le dernier code JavaScript, mais nous ne pouvons pas obtenir le dernier code JavaScript.

Note éditoriale: Cette question est semi-dupliquée aux endroits suivants, et la réponse à 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 en cache?

Comment puis-je forcer les clients à actualiser les fichiers JavaScript?

Recharger dynamiquement les données source Javascript / json locales

Vous pouvez appeler window.location.reload (true) pour recharger la page actuelle. Il ignorera tous les éléments mis en cache et récupérera de nouvelles copies de la page, des css, des images, du JavaScript, etc. du serveur. Cela n'efface pas tout le cache, mais a pour effet de vider le cache de la page sur laquelle vous vous trouvez.

Cependant, votre meilleure stratégie consiste à créer une version du chemin ou du nom de fichier comme mentionné dans diverses autres réponses. En outre, consultez Revving Filenames: n'utilisez pas de chaîne de requête pour des raisons de ne pas l'utiliser ?v=ncomme schéma de version.

Vous ne pouvez pas vider le cache avec javascript. Une méthode courante consiste à ajouter le numéro de révision ou l'horodatage de la dernière mise à jour au fichier, comme ceci:

myscript.123.js

ou

myscript.js?updated=1234567890

Essayez de changer le src du fichier JavaScript? De ceci:

<script language="JavaScript" src="js/myscript.js"></script>

Pour ça:

<script language="JavaScript" src="js/myscript.js?n=1"></script>

Cette méthode devrait forcer votre navigateur à charger une nouvelle copie du fichier JS.

Autre que la mise en cache toutes les heures ou toutes les semaines, vous pouvez mettre en cache en fonction des données du fichier.

Exemple (en PHP):

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

ou même utiliser l'heure de modification du fichier:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>

Vous pouvez également forcer le rechargement du code toutes les heures, comme ceci, en PHP:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

ou

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

mettez ceci à la fin de votre modèle:

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}

essayez d'utiliser ceci

 <script language="JavaScript" src="js/myscript.js"></script>

Pour ça:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>

Voici un extrait de ce que j'utilise pour mon dernier projet.

Du contrôleur:

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

De la vue:

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

Notre processus de publication génère un fichier avec le numéro de révision de la version actuelle. Cela fonctionne en encodant l'URL de ce fichier et en l'utilisant comme un buster de cache. En cas de basculement, si ce fichier n'existe pas, l'année et le numéro de semaine sont utilisés pour que la mise en cache fonctionne toujours, et il sera actualisé au moins une fois par semaine.

En outre, cela fournit un contournement du cache pour chaque chargement de page dans l'environnement de développement afin que les développeurs n'aient pas à se soucier de vider le cache pour toutes les ressources (javascript, css, appels ajax, etc.).

ou vous pouvez simplement lire le fichier js par serveur avec file_get_contets puis mettre en écho dans l'en-tête le contenu de js

Peut-être que "vider le cache" n'est pas aussi simple qu'il devrait l'être. Au lieu de vider le cache de mes navigateurs, j'ai réalisé que "toucher" le fichier changerait en fait 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 nouvelle copie la plus récente de ce qui est sur votre serveur (code, graphiques tout multimédia aussi). Je vous suggère de simplement copier les scripts les plus récents sur le serveur et la solution «faire la chose tactile» avant que votre programme ne s'exécute, de sorte qu'il changera la date de tous vos fichiers problématiques en une date et une heure les plus récentes, puis il téléchargera une nouvelle copie à 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 pour différentes commandes, mais ils vérifient tous l'heure des fichiers et se comparent à votre copie téléchargée dans votre navigateur, si la date et l'heure sont différentes, feront l'actualisation), si vous ne peut pas aller dans le bon sens, il y a toujours une autre solution utilisable et meilleure. Meilleures salutations et bon camping.

J'ai eu quelques soucis avec le code proposé par yboussard. La boucle j interne ne fonctionnait pas. 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;
            }
        }
    }
}

Si vous utilisez php, vous pouvez faire:

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

Cache.delete () peut être utilisé pour les nouveaux Chrome, Firefox et Opera.

Veuillez ne pas donner d'informations erronées. L'API du cache est un autre type de cache du cache http

Le cache HTTP est déclenché lorsque le serveur envoie les en- têtes corrects , vous ne pouvez pas accéder avec javasvipt.

L'api du cache en revanche est déclenchée quand vous le souhaitez, elle est utile lorsque vous travaillez avec un service worker afin que vous puissiez intersecter la requête et y répondre à partir de ce type de cache voir: ilustration 1 ilustration 2 cours

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

1. Utilisez location.reload (true) cela ne fonctionne pas pour moi, donc je ne le recommanderais pas.
2. Utilisez Cache api afin de sauvegarder dans le cache et intersecter la demande avec le service worker , soyez prudent avec celui-ci car si le serveur a envoyé les en- têtes de cache pour les fichiers que vous souhaitez actualiser, le navigateur répondra en premier à partir du cache HTTP, et s'il ne le trouve pas, il ira sur le réseau, vous pourriez donc vous retrouver avec un ancien fichier
3. Changez l'url de vos fichiers stactics, ma recommandation est que vous devez le nommer avec le changement de contenu de vos fichiers, j'utilise md5 puis je le convertis en chaîne et URL conviviale, et le md5 changera avec le contenu du fichier, là vous peut envoyer librement des en-têtes de cache HTTP assez longtemps

Je recommanderais le troisième voir

Vous pouvez également désactiver la mise en cache du navigateur avec des balises méta HTML, il suffit de mettre des balises html dans la section head pour éviter que la page Web ne soit mise en cache pendant que vous codez / 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"/>

Actualisez votre page après l'avoir collé dans la tête et devrait également actualiser le nouveau code javascript.

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 ça

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

il s'actualise et évite la mise en cache, mais il sera là sur votre page jusqu'à ce que vous ayez terminé le test, alors vous pouvez le retirer. La meilleure option est ce que je pense.

J'ai tendance à versionner mon framework puis à appliquer le numéro de version aux chemins de script et de style

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>

window.parent.caches.delete("call")

fermez et ouvrez le navigateur après avoir exécuté le code dans la console.

window.location.reload(true)semble avoir été déconseillé par la norme HTML5. Une façon de faire cela sans utiliser de chaînes de requête consiste à utiliser l'en- Clear-Site-Datatête , qui semble normalisé .

Parce que le navigateur cache le même lien, vous devez ajouter une fin de nombre aléatoire de l'URL. new Date().getTime()générer un nombre différent.

Ajoutez simplement la new Date().getTime()fin du lien comme un appel

'https://stackoverflow.com/questions.php?' + new Date().getTime()

Production: https://stackoverflow.com/questions.php?1571737901173