AngularJs强制浏览器清除缓存[重复]

Posted 2023-02-19

【中文标题】AngularJs强制浏览器清除缓存[重复]

【英文标题】：AngularJs force browser to clear cache [duplicate]

【发布时间】：2015-10-29 07:26:50

【问题描述】：

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

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

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

【问题讨论】：

***.com/questions/32414/… 可能会有所帮助

将 ?ver=timestamp 添加到 url 或 ^ 对脚本说。

@RazvanDumitru 页面上的 html 会被更新吗？

您可以使用元标记来处理。 ***.com/questions/1341089/… 。请注意，它不适用于 IE5 或类似的一些奇怪的浏览器。

@RazvanDumitru 谢谢你，当你说奇怪的浏览器时，你不是指 safari 之类的东西吗？

【参考方案1】：

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

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

【讨论】：

是的，这特别需要 gulp 但如果你使用 Webpack，在输出配置中使用 hash 占位符会更容易。

【参考方案2】：

如上所述，解决浏览器缓存问题的常见解决方案是向加载的资源文件添加某种版本令牌（版本号、时间戳、哈希等）。这涵盖了用户加载页面或重新加载页面的情况。如前所述，gulp task、WebPack、一些后端框架如 Asp.net MVC 等支持此功能以及捆绑、最小化、混淆等。最好用它们来解决其他相关问题。

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

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

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

所以，要彻底解决这个问题，需要实现文件捆绑+新版本用户通知机制。

【参考方案3】：

如果您正在寻找一个非常简单的解决方案并且您的 IDE 是 C# 下的 Visual Studio，您可以获取应用构建 ID 并在您的 js 文件 url 上连接。

首先，您应该为这样的次要版本激活增量：

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

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

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

然后，通过您的 html 调用该属性并将值作为参数连接到您的 url 文件中，如下所示：

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

使用此解决方案，您的文件仅在发生新构建时才会重新加载。