Comment vider le cache du navigateur par programme?

Utiliser html lui-même.Il existe une astuce qui peut être utilisée.L'astuce consiste à ajouter un paramètre / chaîne au nom de fichier dans la balise de script et à le modifier lorsque vous effectuez des modifications.

<script src="myfile.js?version=1.0.0"></script>

Le navigateur interprète la chaîne entière comme le chemin du fichier même si ce qui vient après le "?" sont des paramètres. Donc, ce qui se passe maintenant, c'est que la prochaine fois que vous mettrez à jour votre fichier, changez simplement le numéro dans la balise de script sur votre site Web (exemple <script src="myfile.js?version=1.0.1"></script>) et chaque navigateur d'utilisateurs verra que le fichier a changé et en récupérera une nouvelle copie.

Sur Chrome, vous devriez pouvoir le faire en utilisant l'extension d'analyse comparative. Vous devez démarrer votre chrome avec les commutateurs suivants:

./chrome --enable-benchmarking --enable-net-benchmarking 

Dans la console de Chrome, vous pouvez désormais effectuer les opérations suivantes:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Comme vous pouvez le voir à partir des commandes ci-dessus, il efface non seulement le cache du navigateur, mais également le cache DNS et ferme les connexions réseau. Ils sont parfaits lorsque vous effectuez une analyse comparative du temps de chargement des pages. Évidemment, vous n'êtes pas obligé de les utiliser tous si vous n'en avez pas besoin (par exemple, clearCache () devrait suffire si vous devez vider le cache uniquement et ne vous souciez pas du cache DNS et des connexions).

Location.reload (true); rechargera la page en cours en ignorant le cache.
Cache.delete () peut également être utilisé pour nouveaux chrome, firefox et opéra.

La meilleure idée est de faire la génération de fichiers js avec le nom + un hachage avec la version, si vous avez besoin d'effacer le cache, générez simplement de nouveaux fichiers avec un nouveau hachage, cela déclenchera le navigateur pour charger de nouveaux fichiers

Au départ, j'ai essayé diverses approches programmatiques dans mon html, JS pour effacer le cache du navigateur. Rien ne fonctionne sur le dernier Chrome.

Enfin, je me suis retrouvé avec .htaccess:

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

Testé dans Chrome, Firefox, Opera

Référence: https://wp-mix.com/disable-caching-htaccess/

Vous pouvez désormais utiliser Cache.delete ()

Exemple:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Fonctionne sur Chrome 40+, Firefox 39+, Opera 27+ et Edge.

Imaginez que les .js fichiers sont placés dans /my-site/some/path/ui/js/myfile.js

Donc, normalement, la balise de script devrait ressembler à ceci:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Maintenant, changez cela en:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Maintenant, bien sûr, cela ne fonctionnera pas. Pour le faire fonctionner, vous devez ajouter une ou quelques lignes à votre .htaccess La ligne importante est: (tout .htaccess en bas)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Donc, ce que cela fait, il supprime en quelque sorte le 1111111111 du chemin et établit un lien vers le chemin correct.

Alors maintenant, si vous apportez des modifications, il vous suffit de changer le nombre 1111111111 en n'importe quel nombre que vous voulez. Et quelle que soit la manière dont vous incluez vos fichiers, vous pouvez définir ce nombre via un horodatage lors de la dernière modification du fichier js. Le cache fonctionnera donc normalement si le nombre ne change pas. S'il change, il servira le nouveau fichier (OUI TOUJOURS) parce que le navigateur obtient une nouvelle URL complète et croit simplement que le fichier est si nouveau qu'il doit aller le chercher.

Vous pouvez l'utiliser pour CSS, favicons et tout ce qui est mis en cache. Pour CSS, utilisez simplement comme ça

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

Et ça marchera! Simple à mettre à jour, simple à entretenir.

Le .htaccess complet promis

Si vous n'avez pas encore de .htaccess c'est le minimum que vous devez y avoir:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>

Il n'y a aucun moyen qu'un navigateur vous permettra de vider son cache. Ce serait un énorme problème de sécurité si cela était possible. Cela pourrait être très facilement abusé - la minute où un navigateur prend en charge une telle "fonctionnalité" sera la minute où je le désinstallerai de mon ordinateur.

Ce que vous pouvez faire est de lui dire de ne pas mettre en cache votre page, en envoyant les en-têtes appropriés ou en utilisant ces balises META:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Vous pouvez également envisager de désactiver la saisie semi-automatique dans les champs de formulaire, bien que je crains qu'il existe une méthode standard pour le faire (voir cette question).

Quoi qu'il en soit, je voudrais souligner que si vous travaillez avec des données sensibles, vous devez utiliser SSL. Si vous n'utilisez pas SSL, toute personne ayant accès au réseau peut détecter le trafic réseau et voir facilement ce que voit votre utilisateur.

L'utilisation de SSL oblige également certains navigateurs à ne pas utiliser la mise en cache, sauf indication contraire explicite. Voir cette question.