HTML5离线“应用程序缓存错误事件:清单提取失败(-1)”

前端之家收集整理的这篇文章主要介绍了HTML5离线“应用程序缓存错误事件:清单提取失败(-1)”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试编写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

Safari开发者指南:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//apple_ref/doc/uid/TP40002051-CH4-SW4

原文链接:https://www.f2er.com/html5/168733.html

猜你在找的HTML5相关文章