AngularJs 强制浏览器清除缓存

Question

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

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

那么，在angular中是否有一种方法可以强制浏览器清除缓存呢？

- Marc Rasmussen

---

这个网址 https://dev59.com/nHVD5IYBdhLWcg3wRpeX 可以帮助您。 - seenukarthi

将 ?ver=timestamp 添加到 URL 中，或者像 ^ 所说的那样添加到脚本中。 - Razvan Dumitru

@RazvanDumitru，页面上的HTML也会更新吗？ - Marc Rasmussen

你可以使用元标签来处理这个问题。https://dev59.com/6nM_5IYBdhLWcg3whznx 。请注意，它在IE5或某些奇怪的浏览器中无法正常工作。 - Razvan Dumitru

@RazvanDumitru 谢谢你，当你说奇怪的浏览器时，你不是指Safari之类的浏览器吧？ - Marc Rasmussen

Answer 1

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

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

- aUXcoder

---

是的，这个特定的需求需要使用gulp，但如果你正在使用Webpack，在输出配置中使用“hash”占位符会更容易。 - aUXcoder

Answer 2

如上所述，解决浏览器缓存问题的常见方法是给加载的资源文件添加某种版本令牌（版本号、时间戳、哈希值等）。这适用于用户加载页面或重新加载页面的情况。像 gulp 任务、WebPack、一些后端框架（如 Asp.net MVC 等）都支持这个功能以及打包、最小化、混淆等特性。最好使用它们来解决其他相关问题。

但是，它们不能解决的一个问题是在后端更改（部署）主页面本身和已加载的文件时更新它们。例如，当其他用户在不重新加载页面的情况下访问您的单个页面时，您部署了应用程序。或者用户在浏览器选项卡中开着应用程序并在一小时后回到该页面。在这种情况下，一些已经加载的文件（包括主页）是旧的，而一些在后端方面是新的。此外，所有已加载的文件对于可能在后端不存在但在浏览器缓存中已存在的文件具有旧的引用。因此，在总体上，您的应用程序出现了问题，这实际上是 Angular 本身无法解决的更普遍的问题。

为了解决这个问题，您需要通知用户存在新的应用程序版本，并要求他们重新加载页面或强制刷新页面。从用户体验的角度来看，第二种方法并不好。想象一下在工作时某个时刻页面开始重新加载。很奇怪，对吧？

为了通知用户有新版本可用，您可以使用 WebSockets 消息将新版本信息发送到应用程序，将版本传递给每个响应（不是好的解决方案）或定期从后端拉取新版本（也不是很好）。但它们都不是简单的解决方案。如果您的应用程序登录会话很短，则可以在重新登录时检查版本、刷新身份验证 cookie 等。

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

- Vasyl Zvarydchuk

Answer 3

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

首先，您应该激活次要版本的增量，如下所示： 转到项目属性，在新窗口中的应用程序下，单击程序集信息，然后在程序集版本（如上图所述的最后一位数字）中添加“*”。

之后，在您的codebehind 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>

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

- Leandro Alves