Question

我正在尝试编写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也会回复抱怨提取失败。

所有文件都是通过端口80上的SimpleHTTPServer通过Python从Windows 7 PC本地提供的。我已使用以下行更新了％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

Answer 1

要离线缓存网站（HTML5），您需要指定运行所需的所有文件。简而言之，请指定所需的站点主要组件。

创建清单的简便方法是在Note Pad中。

注意：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等确切格式....

仅仅因为你有一个清单文件并不意味着它会加载。您需要将以下内容添加到标记：

<html manifest="~/cache.manifest" type="text/cache-manifest">

请勿忘记在添加此内容后，首次加载页面时会将其缓存。因此，您需要在＆＃39; mobileinit＆＃39;中注册缓存事件。事件

$(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的开发者工具＆＃34; F12＆＃34;将显示清单加载中的错误。即您仍需要添加的文件。

希望这会有所帮助，涵盖整个过程。我假设如果你处于开发的这个阶段，你可以将它们添加到移动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开发者指南： https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//apple_ref/doc/uid/TP40002051-CH4-SW4

Answer 2

您是否尝试过https://manifest-validator.appspot.com/之类的内容来验证您的清单？

我已经在我的清单文件上挣扎了很长一段时间，很难找出问题所在。可能是一些简单的错误编码，一开始就有额外的换行符。

Answer 3

今天我遇到了完全相同的问题。经过几个小时的工作，我得到了关键点：清单文件的格式。简而言之，文件必须仅使用ascii（0A）开始新行，而不是ascii（0D）或ascii（0D + 0A）。只有这样我才能使用Chrome，或者我会在控制台窗口中看到空白页和错误信息。

根据w3c，（http://www.w3.org/TR/html5/offline.html），在“5.6.3.2写缓存清单”中，0A，0D和0D + 0A都是可接受的。所以，我的观点是：Chrome在这一点上与w3c不兼容。

更进一步说，如果要缓存myapp.js，它必须遵循相同的规则：仅使用ascii（0A）开始一个新行，否则Chrome将在控制台窗口中抛出相同的信息。

我的Chrome是13.0.782.107

Answer 4

我刚刚看到这个链接：

http://www.kaspertidemann.com/regarding-the-manifest-fetch-failed-error-in-chrome/

Answer 5

我现在已经通过切换到CherryPy来解决这个问题来提供这些文件：）

如果其他人变得同样陷入困境但又希望保持服务器部分简单，那么下面的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())

如果你想从另一台设备访问“网站”，你需要使用外部IP地址（对我来说这是192.168.0.3）。否则，您可以使用'127.0.0.1'作为'server.socket_host'值。然后我将浏览器指向http://192.168.0.3/index.html以获取我的静态索引页。

Answer 6

我已经在visual studio for MVC应用程序中解决了这个问题。按照以下步骤：

我在记事本中创建了.appcache文件，并将清单文件内容复制到其中。（您不需要创建.Manifest文件或不创建Manifest.cshtml视图。只需在记事本中创建.appcache文件。）
作为参考 <html manifest="~/example.appcache">在视野中问题将得到解决

Answer 7

我认为该行

CACHE：

清单文件中缺少

（应该是文件列表之前的第2行。

HTML5离线“应用程序缓存错误事件：清单提取失败（-1）”

7 个答案: