AngularJs强制浏览器清除缓存

Question

我的angular应用程序现在不断变化，因为我们的团队现在正在快速更新。

由于缓存，我们的客户并不总是拥有我们代码的最新版本。

那么angular是否有办法强制浏览器清除缓存？

Answer 1

您可以使用一个非常简单的解决方案，即在脚本文件中附加一个哈希值。每次部署应用程序时，您都会通过gulp / grunt任务自动使用不同的哈希值来提供文件。例如，您可以使用gulp-rev。我在所有项目中使用这种技术并且工作得很好，在构建/部署过程中自动化可以成为所有项目的解决方案。

AngularJS的Yeoman生成器generator-gulp-angular （这是我选择的生成器）使用此解决方案来确保浏览器加载新的优化文件而不是缓存中的旧文件。请创建一个演示项目并使用它，您将看到它正在运行。

Answer 2

如上所述，解决浏览器缓存问题的常见解决方案是在加载的资源文件中添加某种版本标记（版本号，时间戳，哈希等）。这包括用户加载页面或重新加载页面的情况。正如已经告知gulp任务，WebPack，Asp.net MVC等一些后端框架支持此功能以及捆绑，最小化，混淆等。最好使用它们解决另一个相关问题。

但有人认为他们无法解决它正在更新主页本身并在后端更改（部署）时加载已经存档的文件。例如，您部署应用程序，而其他用户使用您的单个页面而不重新加载它。或者用户在浏览器选项卡中打开应用程序，并在一小时内返回此页面。在这种情况下，一些已经加载的已经包含主页的文件是旧的，而在后端的一些是新的。此外，所有已加载的文件都具有对文件的旧引用，这些文件可能不存在于后端但在浏览器中缓存。所以，一般来说你在这里破坏了应用程序，这实际上是Angular无法解决的更普遍的问题。

要解决此问题，您需要通知您的用户存在新的应用版本，他们需要重新加载页面或强行重新加载。从用户体验的角度来看，第二种方法并不好。让我们假设您正在工作，并且在某个时刻页面开始重新加载。很奇怪，对吧？

为了通知用户有关新版本的信息，你可以使用websokets消息给应用程序关于新版本，在每个响应中传递版本（不是一个好的解决方案）或不时拉出关于新版本的后端（不是很好） 。但它们都不是微不足道的。如果您的应用程序登录会话很短，您可以在重新登录时刷新版本，刷新身份验证cookie等等。

因此，要完全解决这个问题，您需要实现文件捆绑+新版本用户通知机制。

Answer 3

如果您正在寻找一个非常简单的解决方案，并且您的IDE是C＃下的visual studio，您可以获得应用程序构建ID并在您的js文件URL上连接。

首先，你应该为那些次要版本激活增量：

转到项目属性，在新窗口的“应用程序”下，单击“装配信息”并在“装配”版本中添加“*”（如上图所示，最后一位数字）。

之后，在你的代码隐藏的aspx，web服务或webapi等中添加一个新属性...对于我正在使用aspx的这段代码：

    public string GetVersionApp => System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();

然后，通过你的html调用属性并在你的url文件中将值连接为param，如下所示：

<script type="text/javascript" src="App/RequestsList/directives/comment-directive.js?<%=GetVersionApp%>"></script>

使用此解决方案，只有在发生新版本时才会重新加载文件。