我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本,即使在浏览器会话之间也是如此.当您更新其中一个文件但用户的浏览器继续使用缓存副本时,这会导致问题.
问题是:在更改文件时,强制用户浏览器重新加载文件的最优雅方法是什么?
理想情况下,解决方案不会强制浏览器在每次访问页面时重新加载文件.我会发布自己的解决方案作为答案,但我很好奇,如果有人有更好的解决方案,我会让你的投票决定.
更新:
在这里讨论了一段时间后,我发现John Millikin和da5id的建议很有用.事实证明,有一个术语:自动版本控制.
我在下面发布了一个新的答案,它是我原来的解决方案和John的建议的组合.
SCdF建议的另一个想法是将伪造的查询字符串附加到文件中.(一些Python代码自动使用时间戳作为伪造的查询字符串由pi提交.).但是,有一些关于浏览器是否会使用查询字符串缓存文件的讨论.(请记住,我们希望浏览器缓存文件并在以后的访问中使用它.我们只希望它在更改后再次获取文件.)
由于不清楚伪造的查询字符串会发生什么,我不接受这个答案.
我们目前正在进行私人测试,因此仍然在进行相当快速的更改,尽管显然随着使用量开始增加,我们将放慢这一过程.话虽这么说,我们遇到的一个问题是,在我们用新的JavaScript文件推出更新之后,客户端浏览器仍然使用文件的缓存版本,但他们看不到更新.显然,在支持调用上,我们可以简单地通知他们进行ctrlF5刷新以确保他们从服务器获取最新文件,但最好在此之前处理它.
我们当前的想法是简单地将版本号附加到JavaScript文件的名称上,然后在进行更改时,增加脚本上的版本并更新所有引用.这绝对可以完成工作,但更新每个版本的引用可能会变得很麻烦.
我确信我们不是第一个处理这个问题的人,我想我会把它扔给社区.在更新代码时,如何确保客户更新缓存?如果您使用上述方法,您是否正在使用简化更改的流程?
我想使用JavaScript重新加载页面,但我也要清除缓存,因此在页面刷新页面上有来自服务器的所有内容的最新版本.
除IE之外的其他浏览器没有获得最新内容.
IE9的任何解决方案?
我有一个VueJS应用程序.每当我运行npm run build它时会创建一组新dist/*文件,但是,当我在服务器上加载它们(删除旧版本后),并在浏览器中打开页面时,它会加载旧版本(从我假设的缓存中).当我刷新页面时,它加载新代码没问题.
这是我的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
有没有办法强制它每次加载新代码或(理想情况下)检查旧文件是否从服务器中消失,然后刷新浏览器?
我很多次遇到这个问题,其中一些用户有一个损坏的应用程序缓存(HTML 5).
每次有新版本时我都会更新清单文件,有时用户会收到损坏的应用程序缓存.
在这种情况下,我想要完全清除应用程序缓存中的内容,并从服务器加载所有新鲜内容.
有没有办法使用Javascript?
我可以location.reload(true)用来刷新页面并重新获取页面.我想将用户重定向到新的URL并清除缓存.
更具体地说,我有一个"清除所有cookie"按钮,在点击后将用户重定向到主页.我希望主页能够刷新.
我经常更新的Angular应用程序存在问题。
我想避免浏览器缓存,我正在尝试几种替代方法,但是它们都不起作用。
第一件事是我很难测试该解决方案是否有效,因为当我上载新版本时,有时我看到它而不必执行其他操作,而不必刷新页面,而有时候我需要打开控制台并强制刷新清空缓存。
我试图在请求标头中包含Cache-Control:no-cache,如您在图像中所见,但这对我不起作用。
我也尝试过,放入app.component.ts
templateUrl: './app.component.html? v1'
Run Code Online (Sandbox Code Playgroud)
正如我在一些答案中看到的那样,但都没有。
事实是我很绝望,因为当我给出我认为可行的东西时,当我与老板核对时,他不会刷新它:-(,可惜的是,正如我所说的,我不知道该怎么做确实,每次我进入网络时,都要从服务器请求最新版本。
谢谢您的帮助
我目前已经开始了一个包括AJAX在内的项目,我遇到了一个问题.使用Microsoft Edge(和Internet Explorer)时,它不会更新数据,除非我关闭整个页面并再次打开它,或者我打开我的PHP文件,我通过AJAX发送数据.
有没有人没有如何使用PHP和/或Javascript解决这个问题?
提前致谢
在我的Web应用程序中,我希望java脚本在用户关闭浏览器时清除缓存.
javascript应该监听事件并清除缓存.
任何人都可以提供示例代码或任何有用的链接?