Html HTML5 离线“应用程序缓存错误事件：清单提取失败 (-1)”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5727306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 offline "Application Cache Error event: Manifest fetch failed (-1)"
提问by Craig McDonnell
I'm trying to write an HTML5 offline application but can't seem to get Chrome to accept the cache manifest file.
我正在尝试编写 HTML5 离线应用程序，但似乎无法让 Chrome 接受缓存清单文件。
Chrome logs the following output to its console while loading the application:
加载应用程序时，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
However, if I remove all lines from the manifest file except for the first line (i.e. "CACHE MANIFEST") Chrome accepts the 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
But, as soon as I add a new line to the manifest (even if that next line is empty) Chrome reverts to complaining that the fetch failed.
但是，只要我在清单中添加新行（即使下一行是空的），Chrome 就会恢复抱怨获取失败。
All files are being served locally from a Windows 7 PC via Python using SimpleHTTPServer on port 80. I've updated the types_map in %PYTHON%/Lib/mimetypes.py with the following line:
所有文件都通过 Python 在端口 80 上使用 SimpleHTTPServer 从 Windows 7 PC 本地提供。我已经使用以下行更新了 %PYTHON%/Lib/mimetypes.py 中的 types_map：
'.manifest': 'text/cache-manifest',
The manifest should contain the following:
清单应包含以下内容：
CACHE MANIFEST
scripts/africa.js
scripts/main.js
scripts/offline.js
scripts/libs/raphael-min.js
favicon.ico
apple-touch-icon.png
采纳答案by Craig McDonnell
I have now resolved this issue by switching to CherryPy for serving these files :)
我现在已经通过切换到 CherryPy 来提供这些文件来解决这个问题:)
If anyone else becomes similarly stuck but wants to keep the server part simple, the following Python may be sufficient for getting started:
如果其他人同样陷入困境，但希望保持服务器部分简单，以下 Python 可能足以入门：
import cherrypy
class SimpleStaticServer:
@cherrypy.expose
def index(self):
return '<html><body><a href="index.html">Go to the static index page</a></body></html>'
cherrypy.config.update({
# global
'server.socket_host': '192.168.0.3',
'server.socket_port': 80,
# /static
'tools.staticdir.on': True,
'tools.staticdir.dir': "(directory where static files are stored)",
})
cherrypy.quickstart(SimpleStaticServer())
If you want to visit the "site" from another device, you'll need to use the external IP address (for me this was 192.168.0.3). Otherwise, you can just use '127.0.0.1' for the 'server.socket_host' value. I then point my browser to http://192.168.0.3/index.htmlto get my static index page.
如果您想从另一台设备访问“站点”，则需要使用外部 IP 地址（对我来说这是 192.168.0.3）。否则，您可以只使用 '127.0.0.1' 作为 'server.socket_host' 值。然后我将浏览器指向http://192.168.0.3/index.html以获取我的静态索引页面。
回答by Paul Styles
To cache a website offline (HTML5) you need to specify all the files needed for it to run. In short specify the site main components needed.
要离线缓存网站 (HTML5)，您需要指定网站运行所需的所有文件。简而言之，指定站点所需的主要组件。
Easy way to create a manifest is in Note Pad.
创建清单的简单方法是在记事本中。
Note: CACHE MANIFEST needs to be first line and your files will follow after a line space as follows:
注意：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
Note2: remove all spaces after each line. Note:3 you need to follow the exact format FOLDER/File or FOLDER/FOLDER/FILE ect....
注2：删除每行后的所有空格。注意：3 您需要遵循确切的格式 FOLDER/File 或 FOLDER/FOLDER/FILE 等....
Just because you have a manifest file doesnt mean it will load. you need to add the following to the Tag:
仅仅因为你有一个清单文件并不意味着它会加载。您需要将以下内容添加到标签中：
<html manifest="~/cache.manifest" type="text/cache-manifest">
Don't forget that after you add this it's cached the first time the page loads. So you need to register a cache event in the 'mobileinit' event.
不要忘记，在添加它之后，它会在页面第一次加载时被缓存。所以你需要在'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')
}
}
Download Safari and use the web inspector to find errors. http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1
下载 Safari 并使用网络检查器查找错误。 http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1
Tip: Chrome's developer tools "F12" will show you the errors in the manifest load. ie the files you still need to add.
提示：Chrome 的开发者工具“F12”将显示清单加载中的错误。即您仍然需要添加的文件。
Hope this helps, covers the entire process. I assuming if you are at this stage in development you new to add these to the mobile init:
希望这有帮助，涵盖了整个过程。我假设如果您处于开发的这个阶段，您将这些新添加到移动初始化：
$.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 Developer Guide: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//apple_ref/doc/uid/TP40002051-CH4-SW4
Safari 开发者指南：https: //developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//apple_ref/doc/uid/TP40002051-CH4-SW4
回答by gnur
Have you tried anything like https://manifest-validator.appspot.com/to validate your manifest?
您是否尝试过类似https://manifest-validator.appspot.com/ 之类的方法来验证您的清单？
I've struggled with my manifest file for quite a while, it is really hard to pinpoint what is wrong. Could be something as simple as wrong encoding to an extra line break at the start.
我已经与我的清单文件斗争了很长一段时间，很难查明哪里出了问题。可能很简单，比如在开始时错误编码到额外的换行符。
回答by bobdong
Today I experienced exactly the same problem. After hours of working I came the the key point: the format of manifest file. In short, the file must begin a new line ONLY with ascii(0A), not ascii(0D), or ascii(0D + 0A). Only in this way can I live with Chrome, or I will get a blank page, and the error info in the console window.
今天我遇到了完全相同的问题。经过几个小时的工作，我来到了关键点：清单文件的格式。简而言之，文件必须仅以 ascii(0A) 开始新行，而不是 ascii(0D) 或 ascii(0D + 0A)。只有这样我才能使用Chrome，否则我会得到一个空白页面，以及控制台窗口中的错误信息。
According to w3c, (http://www.w3.org/TR/html5/offline.html), in “5.6.3.2 Writing cache manifests”，both 0A, 0D and 0D + 0A are all acceptable. So, my opinion is: Chrome is not compatible with w3c in the point.
根据w3c，(http://www.w3.org/TR/html5/offline.html)，在“5.6.3.2 写缓存清单”中，0A、0D和0D+0A都是可以接受的。所以，我的观点是：Chrome 在这一点上与 w3c 不兼容。
Further more, say, if myapp.js is to be cached, it MUST follow the same rule: begins a new line only with ascii(0A), or Chrome will throw the same info in the console windows.
此外，如果要缓存 myapp.js，它必须遵循相同的规则：仅以 ascii(0A) 开始一个新行，否则 Chrome 将在控制台窗口中抛出相同的信息。
My Chrome is 13.0.782.107
我的 Chrome 是 13.0.782.107
回答by Bharat
I have resolved this issue in visual studio for MVC application. follow below steps:
我已经在 MVC 应用程序的 Visual Studio 中解决了这个问题。请按照以下步骤操作：
I have created .appcache file in notepad and copy manifest file content into it. (you don't need to create .Manifest file OR not create Manifest.cshtml view. just create .appcache file in notepad.)
give reference as
<html manifest="~/example.appcache">in view and issue will be resolved
我在记事本中创建了 .appcache 文件并将清单文件内容复制到其中。（您不需要创建 .Manifest 文件或不创建 Manifest.cshtml 视图。只需在记事本中创建 .appcache 文件。）
提供参考
<html manifest="~/example.appcache">意见，问题将得到解决
回答by user731252
I think the line
我认为线
CACHE:
缓存：
is missing in the manifest file (should be the 2nd line, before the list of files.
清单文件中缺少（应该是文件列表之前的第二行。
