My angular application is constantly changing these days because our team runs rapid updates right now.
我的角度应用程序最近不断变化，因为我们的团队现在正在进行快速更新。
Because of cache our clients does not always have the newest version of our code.
由于缓存，我们的客户端并不总是拥有我们代码的最新版本。
So is there a way in angular to force the browser to clear cache?
那么，是否存在一种强制浏览器清除缓存的方法呢?
3 个解决方案
#1
17
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生成器-gulp- angle(这是我的选择生成器)使用这个解决方案来确保浏览器加载新的优化文件，而不是缓存中的旧文件。请创建一个演示项目并使用它，您将看到它的实际操作。
#2
7
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.
但是有人认为他们无法解决这个问题，因为他们在后台修改(部署)时更新了主页并加载了文件。例如，您部署应用程序，而另一个用户使用您的单个页面而不重新加载它。或者用户在浏览器选项卡中打开应用程序，一个小时后返回到这个页面。在这种情况下，一些已经加载的文件，包括主页是旧的，一些在后端是新的。此外，所有已加载的文件都有对文件的旧引用，这些文件可能在后端不存在，但在浏览器中缓存。所以，一般来说，你在这里的应用已经被破坏了，它实际上是一个更一般的问题，角不能自己解决。
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.
为了将新版本通知用户，你可以使用websokets消息来应用新版本，在每个响应中传递版本(不是一个好的解决方案)，或者在一个新版本(也不是很好)的时候拉后端。但它们都不是微不足道的。如果您的应用程序登录会话很短，您可以在重新登录时检查版本，刷新auth cookie等等。
So, to solve this problem fully you need to implement files bundling + new version user notification mechanism.
因此，要完全解决这个问题，您需要实现文件绑定+新版本用户通知机制。
#3
0
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: enter image description here
首先，您应该为像这样的小版本激活增量:在这里输入图像描述
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).
转到您的项目属性，在新窗口的Application下，单击Assembly信息并向Assembly版本添加“*”(如上图所示的最后一位数字)。
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文件中的param连接起来，如下所示:
<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. Hope it helps!
有了这个解决方案，您的文件只有在新的构建发生时才会被重新加载。希望它可以帮助!
#1
17
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生成器-gulp- angle(这是我的选择生成器)使用这个解决方案来确保浏览器加载新的优化文件，而不是缓存中的旧文件。请创建一个演示项目并使用它，您将看到它的实际操作。
#2
7
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.
但是有人认为他们无法解决这个问题，因为他们在后台修改(部署)时更新了主页并加载了文件。例如，您部署应用程序，而另一个用户使用您的单个页面而不重新加载它。或者用户在浏览器选项卡中打开应用程序，一个小时后返回到这个页面。在这种情况下，一些已经加载的文件，包括主页是旧的，一些在后端是新的。此外，所有已加载的文件都有对文件的旧引用，这些文件可能在后端不存在，但在浏览器中缓存。所以，一般来说，你在这里的应用已经被破坏了，它实际上是一个更一般的问题，角不能自己解决。
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.
为了将新版本通知用户，你可以使用websokets消息来应用新版本，在每个响应中传递版本(不是一个好的解决方案)，或者在一个新版本(也不是很好)的时候拉后端。但它们都不是微不足道的。如果您的应用程序登录会话很短，您可以在重新登录时检查版本，刷新auth cookie等等。
So, to solve this problem fully you need to implement files bundling + new version user notification mechanism.
因此，要完全解决这个问题，您需要实现文件绑定+新版本用户通知机制。
#3
0
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: enter image description here
首先，您应该为像这样的小版本激活增量:在这里输入图像描述
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).
转到您的项目属性，在新窗口的Application下，单击Assembly信息并向Assembly版本添加“*”(如上图所示的最后一位数字)。
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文件中的param连接起来，如下所示:
<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. Hope it helps!
有了这个解决方案，您的文件只有在新的构建发生时才会被重新加载。希望它可以帮助!