Chrome不会为启用离线功能的HTML5网站更新CSS文件

时间:2013-01-10 18:08:27

标签: html5 google-chrome html5-appcache

我有一个使用缓存清单的启用脱机功能的网站。我发现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的控制台,看看App Cache事件:

文档是从带有清单/清单/索引

的应用程序缓存加载的

应用程序缓存检查事件

应用程序缓存下载事件

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

应用程序缓存进度事件(第1页,共61页)http://x.x.x.x/Content/themes/base/jquery.ui.accordion.css

剪断

应用程序缓存进度事件(54 of 61)http://x.x.x.x/Content/Site.css

我注意到此列表中的某些项目(如Site.css)带有下划线。那是为什么?

谢谢,

克里斯

1 个答案:

答案 0 :(得分:0)

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

每次更改其中包含的文件时,您都需要重建清单文件,以便下载新的复制文件。

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

例如在node.js

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

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

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