由于缓存，网站 html 没有为用户更新

Question

我正在制作一个网站，运行我的用户遇到了网站缓存问题。我开发了我的网站并设置了 chrome 开发人员工具来禁用我的网站的缓存以进行开发。问题是当我发布新更改以促使我的所有用户由于浏览器缓存而无法获得更新时。当我在朋友的计算机上手动删除我网站的缓存时，它可以工作，但我显然不能期望每个人都这样做以获得新的更新。无论如何我可以通过版本控制或其他方式解决这个问题？我环顾四周，但似乎找不到任何东西。

编辑：我知道我完全可以阻止缓存，但我不想完全阻止看起来像糟糕设计的缓存

Answer 1

缓存的资源是什么？我怀疑 js/css 文件，处理这个问题的一个好方法是在这些资源的路径中添加一个带有版本的查询参数，以便在版本更改时强制浏览器加载新文件，如下所示：

<script type="text/javascript" src="your/js/path/file.js?v=1"></script>
<link href="/css/main.css?v=1" media="screen,print" rel="stylesheet" type="text/css">

并且当您发布您的网站的新更新时，更换版本如下：

<script type="text/javascript" src="your/js/path/file.js?v=2"></script>
<link href="/css/main.css?v=2" media="screen,print" rel="stylesheet" type="text/css">

浏览器会认为该文件是一个新文件，并且会更新缓存。希望这有帮助。

为了禁用 html 缓存，您可以按如下方式将元标记添加到您的文件中：

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

但这将完全禁用具有此元标记的 html 文件的缓存，我认为没有一种方法可以像处理 js/css 文件一样轻松地处理此问题，您可以设置不过，元标记会在未来的某个日期刷新 html。如果您需要更多信息，这里有一篇文章描述了如何使用该元标记：

http://www.metatags.info/meta_http_equiv_cache_control

Answer 2

您可以强制页面在一定时间或其他条件后自动重新加载。

<META HTTP-EQUIV="refresh" CONTENT="15">

或者让它更受事件驱动：

<A HREF="javascript:history.go(0)">Click to refresh the page</A>

您应该能够根据您的特定需要来操作这些解决方案中的任何一个。

Answer 3

一些开发人员将代码注入到他们的 .htaccess 文件中以缓存图像、.css 和 .js 文件。如果您做过类似的事情，请考虑删除这些代码行，或者在每行前面用“#”将其注释掉。

如果你不知道我在说什么，

# CACHING FREQUENTLY USED FILES     (Commenting on an .htaccess file)

<filesMatch ".(ico|jpg|jpeg|png|webp|gif)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(css|js)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(woff|woff2)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

缓存资源是防止它们从服务器重复下载的好方法。但是，如果您要对网站进行更改，我建议仅在最终版本发布后才进行缓存！

Answer 4

您可以更改 CSS 文件的名称。我通常在末尾添加一个数字。然后清除服务器上的缓存。只需确保将所有 header link 中的 link 更改为 css 文件即可。

由于缓存，网站 html 没有为用户更新

Website html doesnt update for users because of cache

html

caching

browser-cache