Perché il server ignora le modifiche nei file di codice anche se la cache è disabilitata?

14

Ho testato un codice html / js sul mio localhost (Windows 7, Chrome v79.0.3945.130 (64-bit)) e circa il 50% delle modifiche al time code non si riflettono nel browser (lo vedo con Dev Tools / Sources ).
Ci sono molti consigli su Internet, ma nessuno dei due sembra funzionare:

Fai clic con il pulsante destro del mouse sulla ricarica e scegli "Svuota cache e Ricarica hard" - non aiuta nel 30% dei casi.
Disabilita la cache nella scheda Rete di Chrome Dev Tools - non aiuta.
Aggiungi <meta http-equiv="Cache-control" content="no-cache">nell'intestazione - non aiuta.
Sostituisci <script src="common.js"></script>con <script src="common.js?blabla"></script>: aiuta nel 60% dei casi, ma è necessario farlo dopo che ogni modifica è un lavoro enorme. Inoltre, non funziona con le modifiche html.
Copia un file in un nuovo file (come index.html in index2.html) e sostituisci il nome del file nel codice: funziona sempre, ma è un lavoro ancora più grande.

Lo stesso identico problema presente quando commetto il codice su github.io

Aiutatemi a farlo in modo che il sito rifletta immediatamente le modifiche al codice.

Modifica: ho creato un file index3.html e ho inserito solo "ciao mondo". Ha aperto il file nel browser. Modificato in "ciao mondo2": il browser ha aggiornato il contenuto. Modificato in "ciao world3" - il browser mostrava ancora "ciao world2" anche dopo ripetute ricariche e "Svuota cache e ricaricare". Sono passato a "ciao world4" - il browser mostrava ancora "ciao world2". Per 4 ore sono passato a "hello world5" - il browser mostra ancora "hello world2". Questo file è stato modificato con il blocco note di base.

Edit2: le persone continuano a chiedere quale server sto usando. Questa sembra una parte del problema. Sfortunatamente, non lo so e non so nemmeno cosa devo fare esattamente per verificarlo. Ecco tutto quello che ho scoperto finora:

Ho una inetpub/wwwrootdirectory in cui inserisco i file html & js e quindi apro index.html in un browser all'indirizzo http://localhost/.
Il pannello La mia rete in Devs Tools è simile al seguente: link immagine .
La configurazione del server è stata molto veloce e non ha richiesto alcun software aggiuntivo per l'installazione. Cioè non sto usando node.js.
C'è iisstart.htm su inetpub/wwwroote quando apro http://localhost/iisstart.htmdice IIS7.

— klm123
fonte

A volte trovo la disabilitazione della cache negli strumenti di sviluppo di Chrome + aggiornamento + riattivazione della cache + aggiornamento a volte risolve il problema? Potrebbe valere la pena di provare ...

— Nick Parsons il

2

che tipo di server stai usando?

— Jhecht,

@Jhecht come lo controllo?

— klm123

1

Da quello che vedo nelle risposte probabilmente ti aggirerai con un parametro. E probabilmente funzionerà. Tuttavia, normalmente questo non dovrebbe essere necessario quando si disabilita la cache negli strumenti di sviluppo di Chrome. Quindi il mio sospetto sarebbe che ci fosse un'altra cache coinvolta. Tra te e il server potrebbe esserci un numero qualsiasi di tecnologia di memorizzazione nella cache aggiuntiva. Alcuni esempi: cache lato server (ad esempio Varnish), cache CDN (ad esempio Cloudflare), proxy locali da router / firewall (ad esempio squid-cache) e cose simili. Verificherei anche quelli.

— Jey DWork,

1

@ klm123 senza sapere di che server si tratta è impossibile dirti come modificarlo o verificarne la configurazione della cache. Se non hai idea del tuo server web, un modo possibile per verificarlo è nella scheda di rete di devTools: controlla le intestazioni di risposta del caricate index.htmlper qualcosa come un X-Powered-Byo Serverun'intestazione che potrebbe dare un suggerimento sul server web. Googling per il percorso del file inetpub/wwwrootpunta fortemente a un server IIS.

— acran

6

L'uso di un parametro è la strada giusta! Qui puoi aggiungere un numero di versione che modifichi solo su grandi modifiche manualmente e per il debug puoi impostarlo su Date.time (), quindi nel tuo tag <head>, questo forza tutte le versioni memorizzate nella cache per essere sovrascritte poiché il parametro è sempre un nuovo uno:

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

Spero che sia di aiuto!

— lehm.ro
fonte

Immagino di poterlo fare. Ma non è effettivamente lo stesso della mia quarta opzione? per aggiungere "? blabla" dopo il nome del file. Non funziona abbastanza spesso - è lo stesso nome di file nella scheda Sorgenti o viene aggiunto blabla, ma il contenuto del file è sempre lo stesso.

— klm123

Non è lo stesso. Una volta che un parametro viene utilizzato due volte (cosa che non accadrà mai con Date.time (), può essere eseguito il rendering di una versione memorizzata nella cache.? Blabla è lo stesso dopo averlo usato due volte in quanto non lo utilizza affatto.

— lehm.ro

il parametro non viene utilizzato due volte. Modifico il codice, quindi cambio il parametro, quindi controllo il codice sorgente nel browser ed è quello vecchio.

— klm123,

Hai provato il mio approccio?

— lehm.ro

Il tuo approccio aiuta, grazie. Ma non risolve il mio problema. Quello che hai scritto non è vero nella mia situazione. "impone che tutte le versioni memorizzate nella cache vengano sovrascritte in quanto il parametro è sempre nuovo", modificando il parametro in uno nuovo non si impone che la mia cache venga ricaricata in modo affidabile. Inoltre non può aiutare con le modifiche in index.html.

— klm123,

3

Nel server Windows IIS7 in esecuzione su Windows 7, per evitare la memorizzazione nella cache dei contenuti, è necessario apportare alcune modifiche a uno dei file di configurazione chiamati web.config. I file di configurazione per IIS 7 e versioni successive si trovano in %WinDir%\System32\Inetsrv\Config foldercui si %WinDir%trova la cartella in cui è stato installato Windows (in genere C:/Windows).

Crea una copia di backup del tuo web.configfile prima di modificarlo in modo da poter eseguire il rollback su di esso se le modifiche apportate al file lo interrompono.

Nel tuo web.configfile, aggiungi quanto segue per impedire la memorizzazione nella cache del tuo 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>

Ottenuto il percorso del file per il web.configfile da qui: Doc Windows: Riferimento di configurazione

Hai ottenuto la configurazione per la cache sopra da qui: Come disabilitare la memorizzazione nella cache del file HTML dell'applicazione a pagina singola servita tramite IIS?

— AndrewL64
fonte

Non c'è web.config nel percorso indicato. L'ho creato e messo lì il tuo codice. Ma ho dovuto sostituire index.html con un percorso completo come projectName/index.html, che copio dall'URL nel mio browser http:/localhost/projectName/index.html. Risultato: nessun effetto sul problema di memorizzazione nella cache.

— klm123,

@ kim123 Puoi provare ad aggiungere il web.configfile nella cartella principale del tuo sito (cartella in cui si trova il tuo sito) invece e cambiare il percorso su just index.htmle vedere se funziona.

— AndrewL64,

L'ho fatto. non aiuta.

— klm123,

1

Ho avuto lo stesso problema e questa è la mia lista di controllo:

Controllare web.config (memorizzazione nella cache e clientcache, criteri cache del kernel ecc.) O .htaccess (Header set Cache-Control).
Se hai usato linguaggi dinamici come ASP, PHP potrebbe esserci un'impostazione della cache interna. In un caso ho trovato <%Response.Expires=1440%>all'interno di molte righe di codice ASP e stava superando tutte le altre impostazioni! In php session_cache_expirepuò fare lo stesso.
Se si utilizza IIS, controllare le intestazioni Server > HTTP Response per assicurarsi che non vi sia nulla di simile nella memorizzazione nella cache anche per i singoli siti Web elencati sotto il nome del server.
controlla le http-equiv="Cache-control"intestazioni html (hai superato questo test!).

Infine, devo dire che in tutte le situazioni precedenti, Verifica Disabilita cache nella scheda newtwork nella console di Chrome ha sempre funzionato per me per visualizzare una nuova versione di pagine, tuttavia questo è buono solo per scopi di debug e i visitatori non lo faranno!

— Ali Sheikhpour
fonte

1. Dove trovo web.config e .htaccess? 2. Uso solo html e js. 3. Le intestazioni di risposta HTTP si presentano così: imgur.com/leYpdej

— klm123

Se si utilizza IIS, web.congfig si trova nella radice di wwwroot. Inoltre esiste un file Machine.config a livello di server che può essere modificato dalla console IIS direttamente da qui: stackoverflow.com/questions/2325473/where-is-machine-config . Se stai usando un server Apache su Windows, per favore trova Windows per trovare .htaccess @ klm123

— Ali Sheikhpour

0

Nel caso specifico con l'utilizzo di Google Chrome, prova questo: Apri Strumenti di sviluppo -> Vai alla scheda "Rete". Seleziona la casella di controllo "Disabilita cache", dopo di che aggiorna la pagina.

NOTA: Affinché ciò funzioni ogni volta che la finestra Dev Tools DEVE rimanere sempre aperta.

Tuttavia, al fine di propagare le modifiche ai tuoi utenti, senza dover aggiornare la pagina, ecc., Devi aggiungere le versioni dei file alla fine di ogni file di riferimento per i file che cambiano frequentemente (proprio come hai sottolineato). Per esempio:

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

L' v=20b379f72a37aggiunta alla fine è un hash di file generato automaticamente del contenuto del file.

— Martin Shishkov
fonte

Questo è l'articolo 2 nella mia lista.

— klm123

Stai assicurando che la finestra di Dev Tools rimanga aperta?

— Martin Shishkov,

la finestra degli strumenti di sviluppo è aperta, la casella di controllo è selezionata [ma di solito guardo la scheda delle fonti] e faccio anche un duro aggiornamento.

— klm123

0

Questa è una possibilità, ma che tipo di editor / IDE stai usando? Inoltre, che tipo di modifiche stai apportando al tuo index.html?

Potresti fornire alcuni esempi di tali modifiche che non vengono riflesse quando salvi e provi a caricare il file?

Vorrei provare a riprodurre il tuo problema. Da quello che la gente suggerisce, non sembra che il problema sia nel codice stesso. Ho il sospetto che si tratti di un problema ambientale, ma avrei bisogno di maggiori informazioni da parte tua per confermare i miei sospetti.

— foreza
fonte

Uso il codice di Microsoft Visual Studio. Esempio: sostituisci <script src = "common.js"> </script> con <script src = "common.js? Blabla">. Esempio2: aggiungi un nuovo pulsante, aggiungi un nuovo div, aggiungi la funzione di chiamata onload. Tbh sembra qualsiasi tipo di modifica.

— klm123,

Vedi le modifiche alla fine del mio post delle domande.

— klm123,

0

Quello che scrivi in meta HTML è una raccomandazione per i browser, non un'istruzione rigorosa. Se nel browser è abilitata la memorizzazione nella cache rigorosa, ciò non sarà di aiuto.

Le soluzioni sono descritte bene: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

Preferisco sul lato server aggiungere agli script la versione con la data dell'ultimo aggiornamento del file stesso.

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

Dove 1579780745150 è Unix Timestamp aggiorna il file myScript.js stesso. Funziona solo con i propri file, ma quelli esterni non sono necessari. Molto spesso nel nome del file è la versione.

— Aleksandr Smityukh
fonte

Se hai bisogno del codice di backend. Dimmi quale piattaforma hai usato.

— Aleksandr Smityukh,

0

Questo probabilmente è davvero frustrante e non sembra che tu stia facendo qualcosa di sbagliato.

È probabile che il problema riguardi la memorizzazione nella cache di qualcosa tra il browser e il file di script che stai chiamando.

Per determinare di cosa si tratta, lasciami chiedere come stai navigando all'URL di localhost?

Esempi:

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

Se stai eseguendo file://path/to/file.htmlquesto significa che non stai navigando attraverso un server web / proxy. In tal caso, http://[something]/file.htmlstai eseguendo un qualche tipo di server Web e questo è probabilmente il colpevole. Cerca una sorta di impostazione in cui è possibile disattivare la memorizzazione nella cache.

Se non stai usando un web server e stai letteralmente navigando direttamente in un file html locale senza un web server, suggerirei che il colpevole è il browser. In questo caso, suggerirei di disattivare la memorizzazione nella cache del browser come suggerito da Martin Shishkov .

— Decano capofamiglia
fonte

è http://localhost/ProjectName/index.htmlDove può essere questa impostazione in cui è possibile disattivare la memorizzazione nella cache?

— klm123,

Sembra dalla schermata che hai postato altrove, stai usando IIS, (chiamato anche Internet Information Services di Microsoft). Una soluzione rapida è fare doppio clic sul file .html per caricarlo nel browser, che utilizzerà un file file://path/to/projectName/index.html. Ciò rimuoverà il web server dall'equazione. Per continuare a utilizzare IIS e correggere la cache, consultare questo articolo: support.microsoft.com/en-us/help/247404/…

— Dean Householder

0

Chrome fa questa cosa in cui, se il file non è cambiato troppo, non è sicuro di cosa significhi, utilizzerà la versione cache "compilata". Per html significa don tree analizzato. Per codice precompilato JS ecc.

Di solito esiste un modo per risolvere questo problema, molti framework usano l'hash all'interno dei nomi dei file, come main.md5hash.js:, perché la modifica del nome del file invalida qualsiasi cache.

Quindi ti verrà lasciato con eventualmente HTML che non si aggiorna. E per essere chiari, non sono sicuro, puoi sempre aggiungere commenti con BLOB casuale ... come una data.

— Akxe
fonte

0

In base agli aggiornamenti della tua risposta, direi che il tuo problema è causato da IIS v7 che utilizza la memoria del tuo PC per memorizzare nella cache non il disco rigido locale, ecco perché Hard reloade tutti gli altri metodi sembrano non funzionare correttamente.

Potrei pensare a 3 soluzioni:

1. Risolvere il problema con la cache IIS: (Non testato perché non ho un PC con IIS)

Dal menu Start , fare clic su Strumenti di amministrazione , quindi su Gestione Internet Information Services (IIS). (vedi immagini )
Nella vista ad albero sul lato sinistro , trova l'applicazione.
Seleziona la voce di menu Cache di output .
Fai clic su Aggiungi regola cache, quindi digita i file su extensioncui desideri disabilitare la cache, ad esempio .aspx.css, .js ecc ... (uno alla volta immagino?)
Ora è possibile deselezionare la cache in modalità utente o Controlla per impedire la memorizzazione nella cache. Dovrebbe apparire simile a questo:

Origine della soluzione : ulteriori informazioni sulla cache di IIS 7

2. Utilizzo di alcune alternative a IIS Ce ne sono alcune ma raccomanderei (sulla base delle mie esperienze) WAMP o XAMPP Entrambi ti daranno un "ambiente" di sviluppo migliore ed entrambi supportano Windows 7. Inoltre, se hai familiarità con VS Code puoi semplicemente usare l' estensione Live Server .

3. Utilizzare la modalità di navigazione in incognito di Chrome durante lo sviluppo. (Non sono sicuro che funzioni per IIS7)

— awran5
fonte

Aggiungi regola cache / Impedisci memorizzazione nella cache - non aiuta [provato con HTML]. Modalità di navigazione in incognito - non aiuta.

— klm123,

Hai provato con i .jsfile? dipende da quali cambiamenti stai apportando.

— awran5,