Javascript AngularJs 强制浏览器清除缓存
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31850824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs force browser to clear cache
提问by Marc Rasmussen
My angularapplication is constantly changing these days because our team runs rapid updates right now.
angular这些天我的应用程序不断变化，因为我们的团队现在运行快速更新。
Because of cache our clients does not always have the newest version of our code.
由于缓存，我们的客户端并不总是拥有我们代码的最新版本。
So is there a way in angularto force the browser to clear cache?
那么有没有办法angular强制浏览器清除缓存？
采纳答案by aUXcoder
You can use a very simple solution that consist in append a hash to your scripts files. Each time your App is deployed you serve your files with a different hash automatically via a gulp/grunt task. As an example you can use gulp-rev. I use this technique in all my projects and works just fine, this automatized in your build/deploy process can be a solution for all your projects.
您可以使用一个非常简单的解决方案，即在脚本文件中附加一个哈希值。每次部署您的应用程序时，您都会通过 gulp/grunt 任务自动为您的文件提供不同的哈希值。例如，您可以使用gulp-rev。我在我所有的项目中都使用了这种技术并且工作得很好，这在您的构建/部署过程中自动化可以成为您所有项目的解决方案。
Yeoman generator for AngularJS generator-gulp-angular(this was my generator of choice)use this solution to ensure that the browser load the new optimazed file and not the old one in cache. Please create a demo project and play with it and you will see it in action.
用于 AngularJS generator-gulp-angular 的Yeoman 生成器（这是我选择的生成器）使用此解决方案来确保浏览器加载新的优化文件而不是缓存中的旧文件。请创建一个演示项目并使用它，您将看到它的实际效果。
回答by Vasyl Zvarydchuk
As mentioned above the common solution to solve browser cache issues is adding some kind of version token (version number, timestamp, hash and so on) to loaded resource files. This covers cases when user load page or reload it. As already told gulp task, WebPack, some backend frameworks as Asp.net MVC and so on support this feature together with bundling, minimization, obfuscation and so on. It's better to use them resolving another related issues too.
如上所述，解决浏览器缓存问题的常见解决方案是向加载的资源文件添加某种版本令牌（版本号、时间戳、哈希等）。这涵盖了用户加载页面或重新加载页面的情况。如前所述，gulp 任务、WebPack、一些后端框架如 Asp.net MVC 等都支持此功能以及捆绑、最小化、混淆等。最好也使用它们来解决其他相关问题。
But one think they can't resolve it's updating the main page itself and loaded already files when they were changed (deployed) on backend side. For instance you deploy app while another users work with your single page without reloading it. Or a user left app open in browser tab and in an hour comes back to this page. In this case some loaded already files including main page are old and some on backend side are new ones. Also all loaded already files have old references to files which are may not exist in backend but cached in browser. So, in general you have broken application here and it's actually more general problem which Angular can't solve itself.
但是有人认为他们无法解决它正在更新主页本身并在后端更改（部署）时加载已经加载的文件。例如，您部署应用程序而其他用户使用您的单个页面而无需重新加载它。或者用户在浏览器选项卡中打开应用程序，一小时后返回此页面。在这种情况下，包括主页在内的一些已加载的文件是旧的，而后端的一些文件是新的。此外，所有已加载的文件都有对文件的旧引用，这些文件可能不存在于后端但缓存在浏览器中。因此，总的来说，您在这里破坏了应用程序，实际上这是 Angular 无法自行解决的更普遍的问题。
To solve this you need to notify your user that a new app version exists and they need to reload page or to reload it by force. The second approach is not good from user experience perspective. Let's imagine you are working and at some moment page starts reload itself. Weird, right?
要解决此问题，您需要通知用户存在新的应用程序版本，他们需要重新加载页面或强制重新加载页面。从用户体验的角度来看，第二种方法并不好。假设您正在工作，并且在某个时刻页面开始重新加载。很奇怪吧？
In order to notify user about new version you can use websokets message to app about new version, pass version in every response (not a good solution) or pull backend from time to time about a new version (not a good too). But they all are not trivial. If your app login session is short you can check version while relogin, refreshing auth cookies and so on.
为了通知用户有关新版本的信息，您可以使用 webskets 消息向应用程序发送有关新版本的消息，在每个响应中传递版本（不是一个好的解决方案）或不时向后端拉取有关新版本的信息（也不是一个好方法）。但它们都不是微不足道的。如果您的应用登录会话很短，您可以在重新登录、刷新身份验证 cookie 等时检查版本。
So, to solve this problem fully you need to implement files bundling + new version user notification mechanism.
所以，要彻底解决这个问题，你需要实现文件捆绑+新版本用户通知机制。
回答by Leandro Alves
If you are looking for a really simple solution and your IDE is visual studio under C# you can get app build Id and concatenate on your js file url.
如果您正在寻找一个非常简单的解决方案，并且您的 IDE 是 C# 下的 Visual Studio，您可以获得应用程序构建 ID 并连接到您的 js 文件 url。
First you should activate incrementation for minor versions like that:
首先，您应该为这样的次要版本激活增量：
Go to your project properties, under Application on the new window, click Assembly Information and add a "*" to Assembly version (last digit as described on image above).
转到您的项目属性，在新窗口中的应用程序下，单击程序集信息并在程序集版本中添加“*”（最后一位数字如上图所述）。
After that, add a new property to your codebehind aspx, or web service or webapi, etc... for this piece of code I'm using aspx:
之后，为您的代码隐藏 aspx、Web 服务或 webapi 等添加一个新属性...对于这段代码，我正在使用 aspx：
public string GetVersionApp => System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();
Then, call the property through your html and concatenate the value as param on your url file, like this:
然后，通过您的 html 调用该属性并将值作为参数连接到您的 url 文件中，如下所示：
<script type="text/javascript" src="App/RequestsList/directives/comment-directive.js?<%=GetVersionApp%>"></script>
With this solution, your files only be reloaded if a new build occurs.
使用此解决方案，只有在发生新构建时才会重新加载您的文件。
