ChatGPT解决这个技术问题 Extra ChatGPT

强制浏览器清除缓存

有没有办法可以在我的页面上放置一些代码,这样当有人访问一个站点时,它会清除浏览器缓存,以便他们可以查看更改?

使用的语言:ASP.NET、VB.NET,当然还有 HTML、CSS 和 jQuery。

可以在此处找到“清除缓存”的一个很好的解决方案或解决方法:stackoverflow.com/a/43676353/2008111

J
Jeroen

如果这是关于 .css.js 的更改,那么“缓存破坏”的一种方法是在每个版本的文件名中附加“_versionNo”之类的内容。例如:

script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.

或者在文件名之后执行:

script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.

您可以查看此 link 以了解它是如何工作的。


这是一个相当不错的解决方案,甚至可以由您的构建系统自动化(并且应该是)。例如,Stackoverflow 就使用了这种方法。
所以现在正在使用 GET 参数。
更好的是保持文件名原样,但将版本号附加为查询字符串参数,即script.js?v=1.2。 (或者,如果您不跟踪版本,只需使用文件上次修改时间,这更容易做到)。不知道前面的评论是不是这个意思!
每个人都如何使用版本控制来做到这一点?似乎真的很痛苦。
@Doin,我简要测试了该技术,它似乎可以阻止 Firefox 和 Chrome 完全缓存文件。
S
Sampson

查看 cache-controlexpires META 标签。

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

另一种常见做法是将不断变化的字符串附加到请求文件的末尾。例如:

<script type="text/javascript" src="main.js?v=12392823"></script>


这在它已经被缓存的情况下没有多大帮助——因为它被缓存了,服务器将不会被查询,因此无法响应 no-cache。此外,确实不应该使用该元标记,正如注释所说,它会破坏网络缓存。
+1 德罗伯特所说的。总是更好地使用 HTTP 标头向客户端和 Web 缓存建议缓存策略,但即使这样也不能强制缓存重新加载。
+1 为您的第二个解决方案。我有这个问题,缓存应该只在某些管理员进行更新后第一次被清除。这种方法应该可以解决
完全禁用缓存通常是一个非常糟糕的主意。
我是初学者,但我注意到以下 MDN Cache-Control doc:“如果您的意思是不将响应存储在任何缓存中,请改用 no-store。该指令无法有效防止缓存存储您的响应。”但是当我在这个页面搜索“no-store”时,似乎没有人提到它。我一定是误会了什么,这是什么?
r
rsp

2012 年更新

这是一个老问题,但我认为它需要一个更新的答案,因为现在有一种方法可以更好地控制网站缓存。

Offline Web Applications(实际上是任何 HTML5 网站)中,applicationCache.swapCache() 可用于更新您网站的缓存版本,而无需手动重新加载页面。

这是 HTML5 Rocks 上 Beginner's Guide to Using the Application Cache 中的代码示例,解释了如何将用户更新到您网站的最新版本:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

另请参阅 Mozilla 开发者网络上的 Using the application cache 了解更多信息。

2016 年更新

网络上的事情变化很快。这个问题是在 2009 年提出的,在 2012 年我发布了一个关于处理问题中描述的问题的新方法的更新。又过了 4 年,现在看来它已经被弃用了。感谢 cgaldiolo 在评论中指出这一点。

目前,截至 2016 年 7 月,HTML Standard, Section 7.9, Offline Web applications 包含一个弃用警告:

此功能正在从 Web 平台中删除。 (这是一个需要很多年的漫长过程。)此时强烈建议不要使用任何离线 Web 应用程序功能。改为使用服务人员。

我在 2012 年引用的 Mozilla 开发者网络上的 Using the application cache 也是如此:

已弃用 此功能已从 Web 标准中删除。尽管某些浏览器可能仍然支持它,但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或 Web 应用程序可能随时中断。

另见Bug 1204581 - Add a deprecation notice for AppCache if service worker fetch interception is enabled


这是否意味着您需要使用和维护缓存清单文件?
警告:应用程序缓存 (AppCache) 接口已被弃用
那么,截至 2017 年的当前建议是什么?
2017:使用服务工作者。
2021年有什么推荐吗?
C
Community

不是这样的。一种方法是在交付内容时发送适当的标头以强制浏览器重新加载:

Making sure a web page is not cached, across all browsers.

如果您在 SO 上搜索 "cache header" 或类似内容,您将找到 ASP.NET 特定示例。

如果您无法控制服务器端的标头,另一种不太干净但有时唯一的方法是向正在调用的资源添加随机 GET 参数:

myimage.gif?random=1923849839

正确地对文件进行版本控制真的更好。这是对带宽的极大浪费,而且可能更重要的是,会大大降低您的网站速度。
这真的取决于情况,不是吗?如果您正在编写 CMS 并需要确保正确更新所有更改的资源,则有时无法绕过这两个选项之一。
像这样的解决方案应该被否决。我们有责任尽可能降低互联网的二氧化碳排放量。
正如@derobert 所说,这完全是浪费带宽并且还会减慢页面加载速度,因为在每次刷新时,您都会强制客户端再次加载资源,即使它没有更改,更好的方法是散列文件并将其作为查询参数,所以它只是在文件更改时更改。
W
Wojtek Mazurek

我有类似的问题,这就是我解决它的方法:

在 index.html 文件中,我添加了清单: 在 部分包含更新缓存的脚本: