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

Question

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

16

我正在尝试编写一个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并使用端口80上的SimpleHTTPServer本地提供服务。我已经更新了%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

- Craig McDonnell

你的清单文件里有什么？ - gnur

@gnur 我尝试过各种内容。只有在其内容限制为头行“CACHE MANIFEST”时才被接受。我已经更新了上面的问题，包括我想要返回的内容。 - Craig McDonnell

我刚刚看到了这个链接：http://www.kaspertidemann.com/regarding-the-manifest-fetch-failed-error-in-chrome/ - Chris

6个回答

9

你是否尝试过类似于https://manifest-validator.appspot.com/这样的工具来验证你的清单文件？

我一直在苦苦挣扎我的清单文件有一段时间了，很难确定哪里出了问题。可能是像错误的编码或者开头多一个换行符这样简单的问题。

- gnur

感谢您回来并提供链接。我的清单文件通过了验证 - 首先我上传了文件，当这个过程通过后，我暂时将HTTP流量转发到我的笔记本电脑上，以便我可以通过URI进行检查。不幸的是，验证器说我的清单没问题。也许我错误地引用了其他各种文件？我已经检查了多次，但自己看不出来。我已经将我拥有的几个文件上传为.zip文件，可从以下网址获取：http://www.box.net/shared/giiirvxked 请您帮忙看一下？ - Craig McDonnell

5

今天我遇到了完全相同的问题。经过几个小时的工作，我发现关键之处在于清单文件的格式。简而言之，该文件必须仅以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。

- bobdong

0

我现在通过切换到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以获取我的静态索引页面。

- Craig McDonnell

0

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

我在记事本中创建了一个.appcache文件，将清单文件内容复制到其中。（您不需要创建.Manifest文件或不创建Manifest.cshtml视图。只需在记事本中创建.appcache文件即可。）
在视图中引用 <html manifest="~/example.appcache"> 即可解决此问题。

- Bharat

-3

我认为manifest文件中缺少了以下这行：

CACHE:

应该在文件列表之前，作为第二行。

- user731252

您不应该缓存您的app.cache文件。浏览器会自行处理此事。 - Dan Doyon

2

如果没有其他部分，如“NETWORK:”或“FALLBACK:”，则不需要“CACHE:”部分。 - fragmentedreality

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Styles · Accepted Answer

要将网站缓存离线（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等进行操作。

仅仅拥有一个清单文件并不意味着它会被加载。您需要将以下内容添加到标签中：

<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 Inspector查找错误。 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