Menu
I'm trying to get HTML 5 offline application cache working with an ASP MVC 3 website. The problem I get is that when I try to navigate to a page in offline mode, it doesn't work.
I am using an action for the manifest file so that it can be dynamically generated, and in the view I specify the Resonse.ContentType = "text/cache-manifest".
I have hosted the application locally in IIS so I'm using http://192.168.55.127/mywebsite/ to access it.
This is the manifest view I'm using. It uses the razor view engine and is a bit messy (hard coded URL etc) while I try to figure out what's wrong.
@{
Layout = null;
Response.ContentType = "text/cache-manifest";
}
CACHE MANIFEST
# Version: @ViewBag.Version
CACHE:
#Script Files
@foreach(var jsFile in Url.GetJsFiles())
{
@string.Format("{0}{1}\r\n", "http://192.168.55.127", Url.Content(jsFile))
}
#Style Sheets
@foreach(var cssFile in Url.GetCssFiles())
{
@string.Format("{0}{1}\r\n", "http://192.168.55.127", Url.Content(cssFile))
}
#Images
@foreach(var imageFile in Url.GetImageFiles())
{
@string.Format("{0}{1}\r\n", "http://192.168.55.127", Url.Content(imageFile))
}
#HTML Pages
@string.Format("{0}{1}", "http://192.168.55.127", Url.Content("~/pages/master.htm"))
@string.Format("{0}{1}", "http://192.168.55.127", Url.Content("~/pages/home.htm"))
@string.Format("{0}{1}", "http://192.168.55.127", Url.Content("~/pages/options.htm"))
NETWORK:
*
This results in paths such as:
http://192.168.55.127/mywebsite/scripts/Libs/jQuery.js
http://192.168.55.127/mywebsite/pages/home.htm
which seems to be fine.
I have referenced the manifest file using the full path too:
<html manifest="http://192.168.55.127/mywebsite/manifest">
which seems to be ok, as when I load the site up in chrome and observe the developer console, it appears to cache all the files without throwing any errors. Also if I navigate to http://192.168.55.127/mywebsite/manifest it serves up the manifest as I'd expect to see it.
The website doesn't use normal navigation, instead it navigates using hash fragments - so to navigate to home the url would be master.htm#home or for options it would be master.html#options. This hash change is picked up by javascript and it loads the page into a div container in the master using ajax, more specifically it uses the 'load' method in jQuery to do this.
This all works fine when not in offline mode, and when observing the network tab in chrome when navigating, the request URL is correct and is the same URL that is listed in the manifest file. The only thing I can think of is that offline mode doesn't work for ajax request, but I was under the impression that it worked the same.
I am testing offline mode using FireFox (version 9.0) by clearing down all history, browsing to the website home page, enabling offline mode, then trying to navigate to the options page. In firebug I see a GET request for the correct URL of the options page but it never returns, it doesn't even error. The loading wheel (next to the request in the net tab in firebug) just keeps turning as if it is still loading. I tried it in Opera 11.60 too (as that also has an offline mode) and the same kind of thing happens.
Any one have any ideas as to what I'm doing wrong? Have I missed something obvious or misunderstood how the manifest should work? Any suggestions will be appreciated.
803
(I know the question's old but for future reference...)
If the AJAX content files are listed in the AppCache manifest file properly (which they seem to be) then this should work. Personally, I'd use relative rather than absolute paths but that shouldn't make a difference.
Your problem seems to be that the manifest file doesn't have a file extension. Try renaming the file (and its reference in master.htm) to appcache.manifest or similar. Then you need to make sure the manifest file's MIME type is set in the server. E.g. for Apache you'd add something like:
AddType text/cache-manifest .manifest
to the server's config file or your .htaccess file.
Also, as well as clearing cached data when testing, make sure you refresh the page at least a couple of times when you make a change to the manifest file because the browser checks for updates and downloads files in separate page loads.
Finally, it won't work if the files you're pulling in with AJAX have parameters in the URL, e.g. ?id=1234, but are not listed as such in the manifest file. That doesn't seem to be the case here but it's something to be aware of.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
