Chrome 未更新支持离线的 HTML5 网站的 CSS 文件答案

【问题标题】：Chrome not updating CSS file for offline-enabled HTML5 websiteChrome 未更新支持离线的 HTML5 网站的 CSS 文件
【发布时间】：2013-01-10 18:08:27
【问题描述】：

我有一个使用缓存清单的启用离线的网站。我发现 Chrome 正在为我的样式表的旧版本提供服务，即使我执行“空缓存和硬重新加载”

如果我将 ?foo=bar 附加到页面的 URL 或 CSS，则会提供新版本的 CSS。

我的清单是在 /Manifest/Index 处动态生成的（例如）

如果我在 Chrome 中打开页面并查看 Fiddler，我看到向 Web 服务器发出了一个请求，正如预期的那样：

#   Result  Protocol    Host    URL Body    Caching Content-Type    Process Comments    Custom  
6   200 HTTP    10.6.4.67   /Manifest/Index 2,476   no-cache  Expires: -1   text/cache-manifest; charset=utf-8  chrome:5484

这是 /Manifest/Index 的标题详细信息

GET /Manifest/Index HTTP/1.1
Host: 10.6.4.67
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) 
Chrome/23.0.1271.97 Safari/537.11
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
HTTP/1.1 200 OK
Date: Thu, 10 Jan 2013 17:59:42 GMT
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 4.0
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Content-Type: text/cache-manifest; charset=utf-8
Content-Length: 2476

谁能告诉我为什么这个缓存清单中的 CSS 文件引用没有更新，除非我将缓存清除查询字符串变量附加到 CSS？尤其是即使我清空了 Chrome 的缓存？？！

更多信息：

如果我更新缓存清单，我可以打开 Chrome 的控制台并看到应用缓存事件触发：

文档是从应用程序缓存中加载的，带有清单 /Manifest/Index

应用缓存检查事件

应用缓存下载事件

应用程序缓存进度事件 (0 of 61) http://x.x.x.x/Content/themes/base/jquery.ui.progressbar.css

应用程序缓存进度事件（61 个中的第一个）http://x.x.x.x/Content/themes/base/jquery.ui.accordion.css

截图

应用程序缓存进度事件（61 个中的 54 个）http://x.x.x.x/Content/Site.css

我确实注意到此列表中的某些项目（例如 Site.css）带有下划线。这是为什么呢？

谢谢，

克里斯

【问题讨论】：

您的 CSS 文件中设置了哪些过期标头？
这里是 CSS 文件的标题：HTTP/1.1 200 OK 服务器：ASP.NET Development Server/10.0.0.0 日期：2013 年 1 月 10 日星期四 19:49:40 GMT X-AspNet-版本：4.0.30319 缓存控制：公共 ETag：“1CDEF6B7198F080” 内容类型：文本/css 内容长度：2365 连接：关闭

标签： html google-chrome html5-appcache

【解决方案1】：

使用 chrome://appcache-internals/ 清除 Chrome 中的应用缓存并将其删除。

此外，您每次更改清单文件时都需要重新构建清单文件，以便下载新副本。

这是通过在清单中使用随机数并在编辑文件时生成它来实现的。

例如在 node.js 中

function generateCacheManifest(...) {
    manifest = 'CACHE MANIFEST';
    manifest += '#version ' + Math.random();
    ...
}

是的，随机数可以在评论中。关键是 Chrome 会检查缓存清单，当它发现没有任何变化时，它不会获取更新的文件。

更改文件，更改清单，就这么简单。

【讨论】：