Come rendere index.html non in cache quando i contenuti del sito sono modifiche nel sito Web di AngularJS?

Question

Normalmente per il file .js e .css aggiungeremo una versione durante la compilazione come xx.js?v=123, e quindi dopo la distribuzione del sito Web, possiamo ottenere la nuova versione di js e CSS. Ma non vedo un luogo che parli di come fare l'aggiornamento del file index.html quando si verifica la distribuzione del sito web. E vediamo in IE che il contenuto HTML dovrebbe essere stato modificato, ma usa ancora il vecchio contenuto HTML.

Una soluzione che trovo da parte di Google è quello di

<meta http-equiv="Cache-control" content="no-cache"> 

Tuttavia, non sono sicuro se questa è la soluzione migliore?

Answer 1

Sì, è il modo corretto. Devi impostare l'intestazione Cache-Control per far sapere ai browser che non devono memorizzare nella cache alcun contenuto per quella richiesta.

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate"> 
<meta http-equiv="Pragma" content="no-cache"> 

(Pragma & Cache-Control è una e la stessa cosa, ma dalla diversa specifica HTTP vedere la risposta qui:. Difference between Pragma and Cache-control headers?)

vedere una delle risposte relative qui: How to burst yeoman index.html cache

Answer 2

No, questo è certamente non nel modo corretto. Considera un sito web con più di una pagina (leggi: 99,999% dei siti web) credi seriamente che lo sviluppatore debba impostare esplicitamente no-cache su ogni pagina? Ciò non ha assolutamente nulla a che fare con Angular e tutto ciò che ha a che fare con il tuo server web (che non ha idea di cosa si trova nel file index.html) in modo errato nella cache dei file come se fossero contenuti statici.

Considerare certamente no-cache come misura temporanea finché non si corregge la configurazione del server.

Answer 3

Come menzionato nei commenti, è proprio la configurazione del server che si desidera controllare ma non si è menzionato il setup. Gestiamo il nostro sito AngularJS con un back-end .NET utilizzando IIS.

Noi aggiornare il nostro sito regolarmente e hanno avuto problemi in passato con JS e CSS risorse caching ma abbiamo risolto attraverso le seguenti impostazioni:

costruire

Usiamo sorso di costruire il nostro Applicazione AngularJS e come parte di esso aggiungiamo un numero di versione alla querystring della nostra applicazione principale CSS e file Javascript che cambiano frequentemente. Per esempio:

<link href="css/default.min.css?v=2" rel="stylesheet" /> 

Server Configuration

Nel web.config radice si precisa che non vogliamo per l'index.html per memorizzare nella cache impostando le intestazioni cache-control, Pragma e Expires richiesta come bene come il max-età a 0.

<location path="index.html"> 
<system.webServer> 
    <staticContent> 
    <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" /> 
    </staticContent> 
    <httpProtocol> 
     <customHeaders> 
      <add name="Cache-Control" value="no-cache, no-store, must-revalidate" /> 
      <add name="Pragma" value="no-cache" /> 
      <add name="Expires" value="-1" /> 
     </customHeaders> 
    </httpProtocol> 
</system.webServer> 
</location> 

Riferimenti:

• IIS client della cache: https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache
• Cache-Control HTTP Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
• Pragma HTTP Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Pragma
• Scade HTTP Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires