当AngularJS网站中的网站内容发生变化时,如何使index.html不缓存？

Question

通常对于.js和.css文件我们会在构建期间附加一个版本 xx.js?v=123,然后在网站部署之后,我们可以获得新版本的js和CSS.但我没有看到有关如何index.html在网站部署发生时进行文件升级的地方.我们确实在IE中看到HTML内容应该已经更改但它仍然使用旧的HTML内容.

我从谷歌找到的一个解决方案是

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

但是,我不确定这是否是最好的解决方案？

Answer 1

是的,这是正确的方法.您必须设置Cache-Control标头以让浏览器知道他们不必缓存该请求的任何内容.

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

(Pragma&Cache-Control是同一个东西,但是来自不同的HTTP规范.请参阅这里的答案:Pragma和Cache-control标头之间的区别？)

请参阅以下相关答案之一:如何破解yeoman index.html缓存

Answer 2

正如评论中所提到的,它确实是您想要查看的服务器配置,但您没有提到您的设置.我们使用IIS运行带有.NET后端的AngularJS站点.

我们定期更新我们的网站,并且过去曾经遇到JS和CSS资源缓存问题,但我们通过以下设置解决了这个问题:

建立

我们使用gulp来构建我们的AngularJS应用程序,作为其中的一部分,我们将版本号附加到我们的主应用程序CSS和经常更改的Javascript文件的查询字符串中.例如:

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

服务器配置

在根web.config中,我们通过将cache-control,Pragma并且Expires请求标头以及max-age设置为0 来指定我们不希望index.html缓存.

<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>

参考文献:

• IIS客户端缓存:https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache
• 缓存控制HTTP标头:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
• Pragma HTTP标题:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Pragma
• 过期HTTP标头:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires

Answer 3

通过将contentvalue设置为0，浏览器将始终从 Web 服务器加载页面。

<meta http-equiv="expires" content="0">