cache.manifest第一次工作然后失败

时间:2010-12-06 17:12:11

标签: html web-applications html5

我正在尝试将html 5缓存添加到网络应用中,没有什么太复杂的图像/ css / js。

当我在编辑cache.manifest文件后加载页面时,我在Chrome 8中得到以下调试:

Creating Application Cache with manifest http://example.com/themes/zenmobile/cache.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 26) http://example.com/themes/zenmobile/plugins/img/toolbar.png
Application Cache Progress event (1 of 26) http://example.com/themes/zenmobile/plugins/img/greenButton.png
Application Cache Progress event (2 of 26) http://example.com/themes/zenmobile/plugins/jqtouch.transitions.js
Application Cache Progress event (3 of 26) http://example.com/themes/zenmobile/plugins/img/back_button_clicked.png
Application Cache Progress event (4 of 26) http://example.com/themes/zenmobile/plugins/img/button.png
Application Cache Progress event (5 of 26) http://quizible.com/sites/all/modules/jquery_update/replace/jquery.min.js
Application Cache Progress event (6 of 26) http://example.com/themes/zenmobile/plugins/img/grayButton.png
Application Cache Progress event (7 of 26) http://example.com/themes/zenmobile/plugins/img/chevron_circle.png
Application Cache Progress event (8 of 26) http://example.com/themes/zenmobile/plugins/img/on_off.png
Application Cache Progress event (9 of 26) http://example.com/themes/zenmobile/plugins/jqtouch.js
Application Cache Progress event (10 of 26) http://example.com/themes/zenmobile/layout.css
Application Cache Progress event (11 of 26) http://example.com/themes/zenmobile/plugins/img/chevron.png
Application Cache Progress event (12 of 26) http://example.com/themes/zenmobile/plugins/img/rowhead.png
Application Cache Progress event (13 of 26) http://example.com/themes/zenmobile/zenmobile.css
Application Cache Progress event (14 of 26) http://example.com/themes/zenmobile/plugins/img/loading.gif
Application Cache Progress event (15 of 26) http://example.com/themes/zenmobile/plugins/img/redButton.png
Application Cache Progress event (16 of 26) http://example.com/themes/zenmobile/plugins/img/activeButton.png
Application Cache Progress event (17 of 26) http://example.com/themes/zenmobile/images/bg_body.png
Application Cache Progress event (18 of 26) http://example.com/themes/zenmobile/plugins/theme.css
Application Cache Progress event (19 of 26) http://example.com/themes/zenmobile/plugins/img/toggle.png
Application Cache Progress event (20 of 26) http://example.com/themes/zenmobile/plugins/img/whiteButton.png
Application Cache Progress event (21 of 26) http://example.com/themes/zenmobile/plugins/img/toggleOn.png
Application Cache Progress event (22 of 26) http://example.com/themes/zenmobile/plugins/jqtouch.css
Application Cache Progress event (23 of 26) http://example.com/themes/zenmobile/plugins/img/button_clicked.png
Application Cache Progress event (24 of 26) http://example.com/themes/zenmobile/plugins/img/back_button.png
Application Cache Progress event (25 of 26) http://example.com/themes/zenmobile/plugins/img/blueButton.png
Application Cache Progress event (26 of 26) 
Application Cache Cached event

当我再次刷新页面时,所有css / images / js都无法加载并且控制台日志会出现错误:

Document was loaded from Application Cache with manifest http://example.com/themes/zenmobile/cache.manifest
Application Cache Checking event
Application Cache NoUpdate event

然后加载'未能加载资源'

除了这个输出,我还没有找到任何有用的尝试来解决这个问题。有没有人见过这个?

3 个答案:

答案 0 :(得分:19)

有同样的问题。把它放在底部为我修好了:

NETWORK:
*

要解决大多数人使用明显更新的问题,这种方法对我来说非常有用:

使用网址中的版本号粘贴清单文件和所有缓存资源,并设置清单的内容以引用该版本号。像这样:

<html manifest="path/to/cache.manifest?v=42">

CACHE MANIFEST
#rev ?v=42

/css/foo.css?v=42
/css/bar.css?v=42
/js/script.js?v=42

我已经为我们自动化了,所以使用新的部署我只是将数字提高1(在我读过的设置文件中的某个地方)并且它在所有提到的文件中都受到影响。每个浏览器请求不仅会检测清单文件的更改,还会导致重新加载(和缓存)所提到的每个资源,从而更新整个应用程序。

答案 1 :(得分:0)

html5清单很难处理。如果它在一个浏览器中工作,它可能无法在另一个浏览器中工作

1)在资源选项卡中查看导致错误的资源(使用firebug或webkit) 2)我发现每次部署更改清单名称有助于确保浏览器检测到更改。

答案 2 :(得分:0)

您是否正在加载清单文件中没有的其他资源?尝试列出所有内容,看看是否还有问题。