分类导航

HTML5 发布时间：2022-04-26 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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’事件中@L_801_24@缓存事件.

$(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