我正在尝试编写HTML5脱机应用程序,但似乎无法让Chrome接受缓存清单文件.
加载应用程序时,Chrome会将以下输出记录到其控制台：
Creating Application Cache with manifest http://localhost/cache.manifest Application Cache Checking event Application Cache Error event: Manifest fetch Failed (-1) http://localhost/cache.manifest
但是,如果我从清单文件中删除除第一行之外的所有行(即“CACHE MANIFEST”),Chrome会接受清单：
Creating Application Cache with manifest http://localhost/cache.manifest Application Cache Checking event Application Cache Downloading event Application Cache Progress event (0 of 0) Application Cache Cached event
但是,只要在清单中添加新行(即使下一行为空),Chrome也会回复以提示该提取失败.
所有的文件都是从Windows 7 PC通过Python使用SimpleHTTPServer在端口80本地服务.我已经更新了％PYTHON％/ Lib / mimetypes.py中的types_map与以下行：
'.manifest': 'text/cache-manifest',
清单应包含以下内容：
CACHE MANIFEST scripts/africa.js scripts/main.js scripts/offline.js scripts/libs/raphael-min.js favicon.ico apple-touch-icon.png
解决方法
要缓存网站离线(HTML5),您需要指定运行所需的所有文件.简而言之,指定所需的站点主要组件.
创建清单的简单方法是在笔记本中.
注意：CACHE MANIFEST需要是第一行,您的文件将按照以下行间隔：
CACHE MANIFEST Scripts/script.js Content/Site.css Scripts/jquery-ui-1.8.20.min.js Scripts/modernizr-2.5.3.js SESOL.png Scripts/jquery.formatCurrency-1.4.0.min.js http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css http://code.jquery.com/jquery-1.8.2.min.js http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js Content/themes/images/icons-18-white.png Controllers/AccountController Controllers/HomeController Models/AccountModels Account/Login Home/CheckOut
注2：删除每一行后的所有空格.
注意：3您需要遵循格式FOLDER / File或FOLDER / FOLDER / FILE ect ….
只因为你有一个清单文件不意味着它会加载.您需要将以下内容添加到标签中：
<html manifest="~/cache.manifest" type="text/cache-manifest">
不要忘记,添加后,第一次加载页面时会被缓存.所以你需要在’mobileinit’事件中注册缓存事件.
$(document).on("mobileinit",function () {
//register event to cache site for offline use
cache = window.applicationCache;
cache.addEventListener('updateready',cacheUpdatereadyListener,false);
cache.addEventListener('error',cacheErrorListener,false);
function cacheUpdatereadyListener (){
window.applicationCache.update();
window.applicationCache.swapCache();
}
function cacheErrorListener() {
alert('site not availble offline')
}
}
下载Safari并使用Web检查器来查找错误.
http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1
提示：Chrome的开发人员工具“F12”会显示清单加载中的错误.即您仍然需要添加的文件.
希望这有助于,涵盖整个过程.我假设如果你正在开发的这个阶段,你将新增添加到移动终端中：
$.mobile.allowCrossDomainPages = true; // cross domain page loading $.mobile.phonegapNavigationEnabled = true; //Android enabled mobile $.mobile.page.prototype.options.domCache = true; //page caching prefech rendering $.support.touchOverflow = true; //Android enhanced scrolling $.mobile.touchOverflowEnabled = true; // enhanced scrolling transition availible in iOS 5
