Pourquoi le serveur ignore-t-il les modifications des fichiers de code alors que le cache est désactivé?

14

Je teste un code html / js sur mon hôte local (Windows 7, Chrome v79.0.3945.130 (64 bits)) et environ 50% des changements de code temporel ne sont pas reflétés dans le navigateur (je le vois avec Dev Tools / Sources ).
Il y a une tonne de conseils sur Internet, mais aucun ne semble fonctionner:

Faites un clic droit sur le rechargement et choisissez "Cache vide et rechargement dur" - n'aide pas dans 30% des cas.
Désactiver le cache dans l'onglet Réseau des outils de développement Chrome - n'aide pas.
Ajouter <meta http-equiv="Cache-control" content="no-cache">dans l'en-tête - n'aide pas.
Remplacer <script src="common.js"></script>par <script src="common.js?blabla"></script>- aide dans 60% des cas, mais vous devez le faire après chaque changement est une énorme corvée. En outre, cela ne fonctionne pas avec les modifications html.
Copiez un fichier dans un nouveau fichier (comme index.html vers index2.html) et remplacez le nom de fichier dans le code - ça marche toujours, mais c'est une corvée encore plus grande.

Le même problème exactement présent lorsque je valide le code dans github.io

S'il vous plaît, aidez-moi à faire en sorte que le site reflète immédiatement les changements de code.

Edit: j'ai créé un fichier index3.html et n'y ai mis que "hello world". Ouvert le fichier dans le navigateur. Changé en "hello world2" - le navigateur a mis à jour le contenu. Changé en "hello world3" - le navigateur montrait toujours "hello world2" même après plusieurs rechargements et "Cache vide et rechargement dur". J'ai changé pour "hello world4" - le navigateur montrait toujours "hello world2". En 4 heures, je suis passé à "hello world5" - le navigateur affiche toujours "hello world2". Ce fichier que j'ai édité avec le bloc-notes de base.

Edit2: Les gens demandent toujours quel serveur j'utilise. Cela ressemble à une partie du problème. Malheureusement, je ne sais pas et je ne sais pas non plus exactement ce que je dois faire pour le vérifier. Voici tout ce que j'ai découvert jusqu'à présent:

J'ai un inetpub/wwwrootrépertoire où je mets les fichiers html et js, puis j'ouvre index.html dans un navigateur à http://localhost/.
Mon panneau Réseau dans Devs Tools ressemble à ceci: lien d'image .
La configuration du serveur était très rapide et ne nécessitait aucun logiciel supplémentaire à installer. C'est-à-dire que je n'utilise pas node.js.
Il y a iisstart.htm sur inetpub/wwwrootet quand je l'ouvre http://localhost/iisstart.htmil dit IIS7.

javascript html server browser-cache klm123
la source

Je trouve parfois la désactivation du cache dans les outils de développement Chrome + rafraîchissement + réactivation du cache + rafraîchissement résout parfois le problème? Ça pourrait valoir le coup ...

Nick Parsons

2

quel type de serveur utilisez-vous?

Jhecht

@Jhecht comment puis-je le vérifier?

klm123

1

D'après ce que je vois dans les réponses, vous travaillerez probablement avec un paramètre. Et cela fonctionnera probablement. Cependant, cela ne devrait normalement pas être nécessaire lorsque vous désactivez le cache dans les outils de développement Chrome. Donc, je pense qu'il y a une autre cache impliquée. Entre vous et le serveur, il pourrait y avoir un certain nombre de technologies de mise en cache supplémentaires. Quelques exemples: la mise en cache côté serveur (par exemple Varnish), la mise en cache CDN (par exemple Cloudflare), les proxys locaux du routeur / pare-feu (par exemple squid-cache) et des choses similaires. Je les vérifierais aussi.

Jey DWork

1

@ klm123 sans savoir de quel serveur Web il s'agit, il est impossible de vous dire comment changer ou vérifier la configuration du cache pour cela. Si vous n'avez aucune idée de votre serveur Web, un moyen possible de le vérifier est dans l'onglet réseau des devTools: vérifiez les en-têtes de réponse du chargé index.htmlpour quelque chose comme un X-Powered-Byou un en - Servertête qui pourrait donner un indice sur le serveur Web. La recherche de votre chemin de fichier inetpub/wwwrootindique fortement un serveur IIS.

acran

6

Utiliser un paramètre est la bonne façon! Ici, vous pouvez ajouter un numéro de version que vous modifiez uniquement en cas de modifications importantes manuellement et pour le débogage, vous pouvez le définir sur Date.time () donc dans votre balise <head>, cela force toutes les versions mises en cache à être écrasées car le paramètre est toujours un nouveau une:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

J'espère que cela t'aides!

lehm.ro
la source

Je suppose que je peux le faire. Mais n'est-ce pas effectivement la même chose que ma quatrième option? pour ajouter "? blabla" après le nom du fichier. Cela ne fonctionne pas assez souvent - c'est soit le même nom de fichier dans l'onglet Sources, soit blabla est ajouté, mais le contenu du fichier est toujours le même.

klm123

Ce n'est pas la même chose. Une fois qu'un paramètre est utilisé deux fois (ce qui n'arrivera jamais avec Date.time (), il peut rendre une version mise en cache.? Blabla est le même après l'avoir utilisé deux fois que ne pas l'utiliser du tout.

lehm.ro

Le paramètre n'est pas utilisé deux fois. Je modifie le code, puis modifie le paramètre, puis vérifie le code source dans le navigateur et c'est l'ancien.

klm123

Avez-vous essayé mon approche?

lehm.ro

Votre approche aide, merci. Mais cela ne résout pas mon problème. Ce que vous avez écrit n'est pas vrai dans ma situation. "force toutes les versions mises en cache à être écrasées car le paramètre est toujours nouveau", changer le paramètre en une nouvelle ne force pas mon cache à se recharger de manière fiable. De plus, cela ne peut pas aider avec les changements dans index.html.

klm123

3

Dans le serveur IIS7 Windows fonctionnant sous Windows 7, pour empêcher la mise en cache de votre contenu, vous devez apporter certaines modifications à l'un de vos fichiers de configuration appelé web.config. Les fichiers de configuration pour IIS 7 et versions ultérieures sont situées dans %WinDir%\System32\Inetsrv\Config folderoù %WinDir%est le dossier dans lequel vous avez installé Windows (généralement C:/Windows).

Créez une copie de sauvegarde de votre web.configfichier avant de le modifier afin de pouvoir y revenir si les modifications que vous apportez au fichier le cassent.

Dans votre web.configfichier, ajoutez simplement ce qui suit pour empêcher la mise en cache de votre index.html:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

Vous avez le chemin d'accès au web.configfichier à partir d'ici: Windows Doc: Configuration Reference

Vous avez la configuration pour le cache ci-dessus à partir d'ici: Comment désactiver la mise en cache du fichier HTML d'application d'une seule page servi via IIS?

AndrewL64
la source

Il n'y a pas de web.config sur le chemin mentionné. Je l'ai créé et y ai mis votre code. Mais j'ai dû remplacer index.html par un chemin complet comme celui projectName/index.htmlque je copie à partir de l'URL dans mon navigateur http:/localhost/projectName/index.html. Résultat - aucun effet sur le problème de mise en cache.

klm123

@ kim123 Pouvez-vous essayer d'ajouter le web.configfichier dans le dossier racine de votre site (dossier dans lequel se trouve votre site) à la place et de modifier le chemin d'accès juste index.htmlpour voir si cela fonctionne.

AndrewL64

J'ai fait. ça n'aide pas.

klm123

1

J'ai eu le même problème et voici ma liste de contrôle:

Vérifiez web.config (mise en cache et cache client, politique de cache du noyau, etc.) ou .htaccess (ensemble d'en- têtes Cache-Control).
Si vous avez utilisé des langages dynamiques comme ASP, PHP, il peut y avoir un paramètre de cache interne. Dans un cas, j'ai trouvé <%Response.Expires=1440%>dans de nombreuses lignes de code ASP et il surmontait tous les autres paramètres! En php session_cache_expiremai fait de même.
Si vous utilisez IIS, vérifiez le serveur > En- têtes de réponse HTTP pour vous assurer que la mise en cache n'est pas la même pour les sites Web individuels répertoriés sous le nom du serveur.
vérifiez les http-equiv="Cache-control"en-têtes html (vous avez réussi ce test!).

Enfin, je dois dire que dans toutes les situations ci-dessus, la vérification de la désactivation du cache dans l' onglet newtwork dans la console Chrome a toujours fonctionné pour moi pour afficher une nouvelle version des pages, mais cela n'est bon qu'à des fins de débogage et les visiteurs ne le feront pas!

Ali Sheikhpour
la source

1. Où puis-je trouver web.config et .htaccess? 2. J'utilise uniquement html et js. 3. Les en-têtes de réponse HTTP ressemblent à ceci: imgur.com/leYpdej

klm123

Si vous utilisez IIS, web.congfig se trouve à la racine de wwwroot. Il existe également un fichier Machine.config au niveau du serveur que vous pouvez modifier à partir de la console IIS directement à partir d'ici: stackoverflow.com/questions/2325473/where-is-machine-config . Si vous utilisez un serveur Apache sur Windows, veuillez rechercher les fenêtres pour trouver .htaccess @ klm123

Ali Sheikhpour

0

Dans le cas spécifique de l'utilisation de Google Chrome, essayez ceci: Ouvrez Dev Tools -> Go to 'Network' tab. Cochez la case "Désactiver le cache", après cela actualisez la page.

REMARQUE: pour que cela fonctionne à chaque fois, la fenêtre Dev Tools DOIT rester ouverte à tout moment.

Cependant, afin de propager les modifications à vos utilisateurs, sans les obliger à actualiser en dur la page, etc., vous devez ajouter des versions de fichiers à la fin de chaque fichier référencé pour les fichiers qui changent fréquemment (comme vous l'avez souligné). Par exemple:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

L' v=20b379f72a37annexe à la fin est un hachage de fichier généré automatiquement du contenu du fichier.

Martin Shishkov
la source

C'est le point 2 de ma liste.

klm123

Assurez-vous que la fenêtre Dev Tools reste ouverte?

Martin Shishkov

la fenêtre des outils de développement est ouverte, la case à cocher est cochée [mais je regarde généralement l'onglet sources], et je fais même un rafraîchissement brutal.

klm123

0

C'est un long plan - mais quel type d'éditeur / IDE utilisez-vous? En outre, quel type de modifications apportez-vous à votre index.html?

Pourriez-vous fournir des exemples de telles modifications qui ne se reflètent pas lorsque vous enregistrez et essayez de charger le fichier?

Je voudrais essayer de reproduire votre problème. D'après ce que les gens suggèrent, il ne semble pas que le problème soit dans le code lui-même. Je soupçonne que c'est un problème environnemental mais j'aurais besoin de plus d'informations de votre part pour confirmer mes soupçons.

foreza
la source

J'utilise le code Microsoft Visual Studio. Exemple: remplacez <script src = "common.js"> </script> par <script src = "common.js? Blabla">. Exemple 2: ajoutez un nouveau bouton, ajoutez un nouveau div, ajoutez un appel à la fonction onload. Tbh cela ressemble à n'importe quel type de modifications.

klm123

Voir les modifications à la fin de mon message de question.

klm123

0

Ce que vous écrivez en méta HTML est une recommandation aux navigateurs, pas une instruction stricte. Si la mise en cache stricte est activée dans le navigateur, cela n'aidera pas.

Les solutions sont bien décrites: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

Je préfère côté serveur ajouter aux scripts la version avec la date de la dernière mise à jour du fichier lui-même.

<script src="/myScript.js?v=1579780745150"></script>

Où 1579780745150 est Horodatage Unix met à jour le fichier myScript.js lui-même. Il ne fonctionne qu'avec ses propres fichiers, mais les fichiers externes ne sont pas nécessaires. Le plus souvent dans le nom de fichier est la version.

Aleksandr Smityukh
la source

Si vous avez besoin du code du backend. Dites-moi quelle plateforme vous avez utilisée.

Aleksandr Smityukh

0

C'est probablement très frustrant et cela ne ressemble pas à ce que vous faites de mal.

Le problème est probable que quelque chose entre votre navigateur et le fichier de script que vous appelez effectue une mise en cache.

Pour déterminer de quoi il s'agit, permettez-moi de vous demander comment vous accédez à l'URL localhost?

Exemples:

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

Si vous exécutez, file://path/to/file.htmlcela signifie que vous ne parcourez pas un serveur Web / proxy. Si c'est le cas, http://[something]/file.htmlvous utilisez une sorte de serveur Web et c'est probablement le coupable. Recherchez une sorte de paramètre où vous pouvez désactiver la mise en cache.

Si vous n'utilisez pas de serveur Web et que vous naviguez littéralement directement vers un fichier html local sans serveur Web, je dirais que le navigateur est le coupable. Si tel est le cas, je suggère de désactiver la mise en cache du navigateur comme l'a suggéré Martin Shishkov .

Dean Householder
la source

c'est http://localhost/ProjectName/index.htmloù ce paramètre où vous pouvez désactiver la mise en cache peut être?

klm123

Il semble que d'après la capture d'écran que vous avez publiée ailleurs, vous utilisez IIS (également appelé Internet Information Services de Microsoft). Une solution rapide consiste simplement à double-cliquer sur votre fichier .html pour le charger dans le navigateur, qui utilisera a file://path/to/projectName/index.html. Cela supprimera le serveur Web de l'équation. Pour continuer à utiliser IIS et simplement corriger le cache, reportez-vous à cet article: support.microsoft.com/en-us/help/247404/…

Dean Householder

0

Chrome fait cette chose où, si le fichier n'a pas trop changé, pas sûr de ce que cela signifie, il utilisera la version de cache «compilée». Pour html, cela signifie arbre de don analysé. Pour le code précompilé JS, etc.

Il existe généralement des moyens de résoudre ce problème, de nombreux frameworks utilisent le hachage à l'intérieur des noms de fichiers, comme main.md5hash.js:, car la modification du nom de fichier invalide tout cache.

Ensuite, vous serez laissé avec éventuellement html pas de mise à jour. Et pour être clair, je ne suis pas sûr, vous pouvez toujours ajouter un commentaire avec un blob aléatoire ... comme une date.

Akxe
la source

0

Sur la base des mises à jour de votre réponse, je dirais que votre problème est dû à IIS v7 qui utilise la mémoire de votre PC pour la mise en cache et non votre disque dur local, c'est pourquoi Hard reloadet toutes les autres méthodes ne semblent pas fonctionner correctement.

Je pourrais penser à 3 solutions:

1. Correction de votre problème de cache IIS: (Non testé car je n'ai pas de PC avec IIS)

Dans le menu Démarrer , cliquez sur Outils d'administration , puis sur Gestionnaire des services Internet (IIS). (voir Images )
Dans l' arborescence sur le côté gauche , recherchez votre application.
Sélectionnez l' élément de menu Output Caching .
Cliquez sur Ajouter une règle de cache, puis saisissez les fichiers sur extensionlesquels vous souhaitez désactiver le cache, c'est-à-dire .aspx.css, .js etc ... (un à la fois, je suppose?)
Maintenant, vous pouvez soit décocher la mise en cache en mode utilisateur, soit cocher empêcher toute mise en cache. Il devrait ressembler à ceci:

Source de la solution - En savoir plus sur IIS 7 Cache

2. Utilisation de certaines alternatives à IIS Il y en a plusieurs mais je recommanderais (en fonction de mes expériences) WAMP ou XAMPP Les deux vous donneront un meilleur "environnement" de développement et les deux prendront en charge Windows 7. De plus, si vous êtes familier avec VS Code, vous pouvez simplement utiliser l' extension Live Server .

3. Utilisez le mode Chrome Incognito pendant le développement. (Je ne sais pas si cela fonctionne pour IIS7)

awran5
la source

Ajouter une règle de cache / Empêcher toute mise en cache - n'aide pas [essayé avec html]. Mode navigation privée - n'aide pas.

klm123

Avez-vous essayé avec des .jsfichiers? cela dépend des changements que vous apportez.

awran5

Pourquoi le serveur ignore-t-il les modifications des fichiers de code alors que le cache est désactivé?

Réponses: