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

La plupart des bonnes réponses sont déjà mentionnées dans ce sujet. Cependant, je souhaite ajouter un lien vers l'article qui est le meilleur que j'ai pu lire.

https://www.fastly.com/blog/clearing-cache-browser

D'après ce que je vois, la solution la plus appropriée est la suivante :

POST dans une iframe. La suite est une petite soustraction du post suggéré :

\=============

const ifr = document.createElement('iframe');
ifr.name = ifr.id = 'ifr_'+Date.now();
document.body.appendChild(ifr);
const form = document.createElement('form');
form.method = "POST";
form.target = ifr.name;
form.action = ‘/thing/stuck/in/cache’;
document.body.appendChild(form);
form.submit();

Il y a quelques effets secondaires évidents : cela créera une entrée dans l'historique du navigateur, et est sujet aux mêmes problèmes de non-caching de la réponse. Mais elle échappe aux exigences de contrôle préalable qui existent pour la récupération, et puisqu'il s'agit d'une navigation, les navigateurs qui divisent les caches effaceront le bon.

Celui-ci est presque parfait. Firefox conservera l'objet bloqué pour les ressources d'origine croisée, mais uniquement pour les recherches ultérieures. Chaque navigateur invalidera le cache de navigation de l'objet, tant pour les ressources d'origine identique que pour les ressources d'origine différente.

\==============================

Nous avons essayé beaucoup de choses mais celle-là fonctionne plutôt bien. Le seul problème est que vous devez être en mesure d'amener ce script d'une manière ou d'une autre à la page de l'utilisateur final afin de pouvoir réinitialiser le cache. Nous avons eu de la chance dans notre cas particulier.

Answer 2

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

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

Answer 3

Cache.delete() peut être utilisé pour les nouveaux chrome, firefox et opera.

Answer 4

J'ai trouvé une solution à ce problème récemment. Dans mon cas, j'essayais de mettre à jour un élément html à l'aide de javascript ; j'avais utilisé XHR pour mettre à jour le texte sur la base de données récupérées à partir d'une requête GET. Bien que la requête XHR soit fréquente, les données HTML mises en cache restaient, de manière frustrante, les mêmes.

Récemment, j'ai découvert une méthode de suppression des cachettes dans le programme fetch api. L'api fetch remplace le XHR, et elle est très simple à utiliser. Voici un exemple :

        async function updateHTMLElement(t) {
            let res = await fetch(url, {cache: "no-store"});
            if(res.ok){
                let myTxt = await res.text();
                document.getElementById('myElement').innerHTML = myTxt;
            }
        }

Remarquez que {cache: "no-store"} argument ? Cela permet au navigateur de vider le cache de cet élément, afin que les nouvelles données soient chargées correctement. Mon Dieu, c'était une aubaine pour moi. J'espère que cela vous sera utile à vous aussi.

De manière indirecte, pour vider le cache d'une image qui est mise à jour côté serveur, mais qui conserve la même src la méthode la plus simple et la plus ancienne consiste à utiliser simplement l'attribut Date.now() et ajoutez ce nombre en tant que variable url à l'adresse suivante src pour cette image. Cela fonctionne de manière fiable pour les images, mais pas pour les éléments HTML. Mais entre ces deux techniques, vous pouvez maintenant mettre à jour toutes les informations dont vous avez besoin :-)

Answer 5

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

fermer et ouvrir le navigateur après avoir exécuté le code dans la console.