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

Question

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

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

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

但是，我不确定这是否是最佳解决方案？

原文由 Rongyan Xia 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 规范。请在此处查看答案： Difference between Pragma and Cache-control headers? ）

在此处查看相关答案之一： How to burst yeoman index.html cache

原文由 Shashank Agrawal 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 请求标头 as 来指定我们不想缓存 index.html以及 max-age 为 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>

参考：

• IIS 客户端缓存： https ://learn.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

原文由 MikeS 发布，翻译遵循 CC BY-SA 3.0 许可协议