blocks|key|887278|text|一个简单的解决方案是将表示时间戳或会话id的查询字符串添加到文件中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|887279|例如，在我们的spring应用程序中，我们只使用：|887280|<script+src="js/angular/lib/app.js?r=<%25=+session.getId()%25>"></script>|code-block|syntax|javascript|887281|您也可以在服务器特定的实现中实现相同的解决方案。|887282|entityMap^0|M|C|0|0|P|0|0|0|O|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

A simple solution would be to add query strings representing timestamp or session id to your files. 

For e.g., in our spring applications, we simply use : 

<pre><code>&lt;script src="js/angular/lib/app.js?r=&lt;%= session.getId()%&gt;"&gt;&lt;/script&gt;
</code></pre>

You can implement the same solution in your server specific implementation too.

blocks|key|887320|text|经典的缓存问题。除非另有规定(由the服务器告知)，否则浏览器将根据文件名缓存资产。因此，当它看到相同名称的脚本/样式/图像时，它将304并提供缓存的版本。有几种方法可以解决这个问题，您可以：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|887321|配置tell服务器，告诉浏览器不要缓存该文件。这显然是低效的，因为用户将不得不一次又一次地下载相同的文件。|887322|将查询字符串参数附加到文件名(如my-angular-code.js?x=123+)中，同样效率低下。|style|CODE|887323|指纹你的资产。这一点在Rails的资产管道文档中有很好的解释。实现这一点有几种方法，也有咕噜任务和吞咽任务可供使用。本质上，它是只在内容发生变化时才更改文件名的过程，迫使浏览器将其视为一个新文件。|887324|entityMap|0|LINK|mutability|MUTABLE|url|https://www.rfc-editor.org/rfc/rfc7232|1|http://guides.rubyonrails.org/asset_pipeline.html|2|https://www.npmjs.com/package/grunt-asset-fingerprint|3|https://github.com/vincentmac/gulp-fingerprint^0|1U|3|0|0|0|G|O|0|H|4|1|18|4|2|1D|4|3|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@$A|15|B|16|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]|$A|1B|B|1C|1|1D]|$A|1E|B|1F|1|1G]]|C|$]]|$1|L|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]|V|$5|O|P|Q|C|$R|W]]|X|$5|O|P|Q|C|$R|Y]]]]

The classic cache problem. Unless told otherwise (by the webserver) the browser is going to cache assets based on the files name. So when it sees the same script/style/image with the same name it will <a href="https://www.rfc-editor.org/rfc/rfc7232" rel="nofollow noreferrer">304</a> and serve the cached version. There are several ways around this, you can:
Configure the webserver to tell browsers not to cache the file. This is obviously inefficient as the user will have to download the same file time and time again.
Append a query string parameter to the filename such as <code>my-angular-code.js?x=123</code>, again inefficient.
Fingerprint your assets. This is neatly explained in Rails' <a href="http://guides.rubyonrails.org/asset_pipeline.html" rel="nofollow noreferrer">Asset Pipeline</a> documentation. There are several ways to achieve this, there are <a href="https://www.npmjs.com/package/grunt-asset-fingerprint" rel="nofollow noreferrer">grunt tasks</a> and <a href="https://github.com/vincentmac/gulp-fingerprint" rel="nofollow noreferrer">gulp tasks</a> also available for this. Essentially it is the process of changing the file name only when the contents changes, forcing the browser to consider it a new file.

blocks|key|1929441|text|如果您使用的是HTML5，那么您可以使用应用缓存。它将自动检查更新，您可以提示用户刷新缓存。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1929442|下面是关于如何使用它的一些很好的教程：|1929443|应用程序缓存使用入门指南|1929444|使用应用程序缓存|1929445|让我们把这个离线+(离线web应用程序)|1929446|entityMap|0|LINK|mutability|MUTABLE|url|https://html.spec.whatwg.org/#appcache|1|http://www.html5rocks.com/en/tutorials/appcache/beginner/|2|https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache|3|http://diveintohtml5.info/offline.html^0|K|4|0|0|0|0|C|1|0|0|8|2|0|0|8|3|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|J|3|K|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|L|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]|V|$5|O|P|Q|C|$R|W]]|X|$5|O|P|Q|C|$R|Y]]]]

If you are using HTML5, then you can use the <a href="https://html.spec.whatwg.org/#appcache" rel="nofollow">Application Cache</a>. It will automatically check for updates and you can prompt the user to refresh the cache.

Here are some good tutorials on how to use it:

<a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" rel="nofollow">A Beginner's Guide to Using the Application Cache</a>

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache" rel="nofollow">Using the application cache</a>

<a href="http://diveintohtml5.info/offline.html" rel="nofollow">Let's take this offline</a> (offline web applications)

blocks|key|887364|text|第一步是了解服务器端正在发生的事情。理解和Etag。虽然您可以使用查询字符串参数，但文件指纹是一种更好的技术将允许代理服务器缓存该文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|887365|您的想法是将您的文档设置为no-cache，并积极地缓存文档引用的资源(如果您有一个有角度的应用程序，这很可能就是您的no-cache)。当您发布一个新的构建时，您的资源都会被重命名，当请求出现时，一切都按预期的方式工作。|887366|我在我的角度应用程序中使用格朗特。效果很好。|887367|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/speed/docs/insights/LeverageBrowserCaching|1|https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating-and-updating-cached-responses|2|https://github.com/cbas/grunt-rev^0|L|4|L|4|0|16|C|1|0|D|8|1N|8|0|D|3|2|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]|$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|J|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]]]

The first step would be to understand what's happening server side right now. Understand and <a href="https://developers.google.com/speed/docs/insights/LeverageBrowserCaching" rel="nofollow">configure <code>Cache-Control</code> and <code>Etag</code></a>. While you can use query string parameters, <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating-and-updating-cached-responses" rel="nofollow">file fingerprinting is a better technique</a> since proxy servers will be allowed to cache the file.

The idea is that you set your documents that can change (if you have an Angular app this is most likely just your <code>index.html</code>) to <code>no-cache</code> and aggressively cache resources that that document references. When you release a new build, your resources are all renamed and when a request comes in everything works as expected.

I use <a href="https://github.com/cbas/grunt-rev" rel="nofollow">grunt-rev</a> in my Angular app. Works great.

blocks|key|1929478|text|第一步是获取时间戳，并将时间戳作为查询参数传递到.html扩展的URL中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1929479|每次加载html内容时，它将使用不同的路由呈现，因为时间戳被附加到URL中。|1929480|例子：|1929481|var+date+=+new+Date().getTime().toString();
app.config(['$stateProvider',+'$urlRouterProvider',function($stateProvider,+$urlRouterProvider){
}])
$stateProvider.state('app',+{
++++abstract:+true,
++++url:+'/app',
++++cache:+false,
++++templateUrl:+'views/app.html'**%2B'?t='%2B+date**
++})
.state('app.dashboard',+{
++++url:+'/dashboard',
++++cache:+false,
++++controller:+'DashboardCtrl+as+showCase',
++++templateUrl:+'components/dashboard/dashboard.view.html'**%2B'?t='+%2B+date**+,
++})|code-block|syntax|javascript|1929482|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The First step is get the timestamp and pass the timestamp as query Parameter in the URL for .html extensions.

While loading html content every time it will render with different routes since the timestamp is append to the URL.

EXAMPLE:

<pre><code>var date = new Date().getTime().toString();
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
}])
$stateProvider.state('app', {
 abstract: true,
 url: '/app',
 cache: false,
 templateUrl: 'views/app.html'**+'?t='+ date**
 })
.state('app.dashboard', {
 url: '/dashboard',
 cache: false,
 controller: 'DashboardCtrl as showCase',
 templateUrl: 'components/dashboard/dashboard.view.html'**+'?t=' + date** ,
 })
</code></pre>

Good morning, I have a web application in production environement. The users are using it every day, when I publish an update and a user comes back to the web application he views the old version of the web application. He needs to refresh the browser to load the new version. How can I solve this problem? I cannot tell hundreds of users to refresh the page every time I publish an update (3-4 times a week).

AngularJS browser cache issues

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

早上好，我在生产环境中有一个web应用程序。用户每天都在使用它，当我发布更新时，一个用户回到web应用程序时，他会查看web应用程序的旧版本。他需要刷新浏览器才能加载新版本。我该如何解决这个问题？每次发布更新时，我都不能告诉数百个用户刷新页面(每周3-4次)。

问AngularJS浏览器缓存问题
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS浏览器缓存问题EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS浏览器缓存问题
EN