dig*_*tal 12 html html5 web-applications
我正在尝试将html 5缓存添加到Web应用程序,没有什么太复杂的图像/ 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
Run Code Online (Sandbox Code Playgroud)
当我再次刷新页面时,所有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
Run Code Online (Sandbox Code Playgroud)
然后加载'未能加载资源'
除了这个输出,我还没有找到任何有用的尝试来解决这个问题.谁看过这个吗?
Mar*_*ool 19
有同样的问题.把它放在底部为我修好:
NETWORK:
*
Run Code Online (Sandbox Code Playgroud)
并且要解决大多数人在使用清单更新时遇到的问题,这种方法对我来说非常有用:
使用URL中的版本号粘贴清单文件和所有缓存资源,并设置清单的内容以引用该版本号.像这样:
<html manifest="path/to/cache.manifest?v=42">
Run Code Online (Sandbox Code Playgroud)
和
CACHE MANIFEST
#rev ?v=42
/css/foo.css?v=42
/css/bar.css?v=42
/js/script.js?v=42
Run Code Online (Sandbox Code Playgroud)
我已经为我们自动化了这个,所以使用新的部署我只是将数字提高1(在我读过的设置文件中的某个地方)并且它在所有提到的文件中受到影响.每个浏览器请求不仅会检测清单文件的更改,还会导致重新加载(和缓存)所提到的每个资源,从而更新整个应用程序.
html5 清单很难处理。如果它在一种浏览器中有效,则可能在另一种浏览器中无效
1) 查看资源选项卡以查看哪个资源导致错误(使用 firebug 或 webkit)
2) 我发现每次部署时更改清单名称有助于确保浏览器检测到更改。