HTML5 offline "Application Cache Error event: Manifest fetch failed (-1)"

Asked 20/4, 2011 at 8:5 Answered 19/4, 2017 at 5:39

I'm trying to write an HTML5 offline application but can't seem to get Chrome to accept the cache manifest file.

Chrome logs the following output to its console while loading the application:

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:

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.

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:

    '.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

Tapestry answered 20/4, 2011 at 8:5 Comment(3)

What's in your manifest file? – Fiore 20/4, 2011 at 8:25

@Fiore I've tried various content. It only seems to be accepted when its content is limited to the header line "CACHE MANIFEST". I've updated the question above to include the content that I'd like to return. – Tapestry 20/4, 2011 at 12:42

I've just come across this link: kaspertidemann.com/… – Hygroscope 16/1, 2014 at 12:46

I have now resolved this issue by switching to CherryPy for serving these files :)

If anyone else becomes similarly stuck but wants to keep the server part simple, the following Python may be sufficient for getting started:

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.html to get my static index page.

Tapestry answered 21/4, 2011 at 18:13 Comment(0)

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.

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

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....

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.

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

Tip: Chrome's developer tools "F12" will show you the errors in the manifest load. ie the files you still need to add.

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

Clementclementas answered 18/2, 2013 at 15:43 Comment(0)

Have you tried anything like https://manifest-validator.appspot.com/ to validate your manifest?

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.

Fiore answered 20/4, 2011 at 13:46 Comment(1)

Thanks for coming back and providing the link. My manifest file passes validation - First I uploaded the file, and when this passed, I temporarily forwarded HTTP traffic to my laptop so I could check by URI. Unfortunately, the validator said my manifest was fine. Perhaps I'm incorrectly referencing the various other files? I've checked and double checked this and can't see it myself. I've uploaded the few files that I have as a .zip available from the following URL: box.net/shared/giiirvxked Please could you take a look? – Tapestry 20/4, 2011 at 18:2

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.

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.

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.

My Chrome is 13.0.782.107

Envenom answered 5/8, 2011 at 12:48 Comment(0)

I have now resolved this issue by switching to CherryPy for serving these files :)

If anyone else becomes similarly stuck but wants to keep the server part simple, the following Python may be sufficient for getting started:

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

Tapestry answered 21/4, 2011 at 18:13 Comment(0)

I have resolved this issue in visual studio for MVC application. follow below steps:

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

Schlegel answered 19/4, 2017 at 5:39 Comment(0)

-3

I think the line

CACHE:

is missing in the manifest file (should be the 2nd line, before the list of files.

Disfigure answered 29/4, 2011 at 14:32 Comment(2)

You should not have your app.cache file cached. Browser will take care of this. – Savill 28/3, 2012 at 23:35

You do not need the CACHE:-part, if you don't have other sections like NETWORK: or FALLBACK: – Arrowroot 14/8, 2012 at 8:40

Recommended topics

Hot tags