HTML5 Cache manifest weird bug with more content

Question

I'm slowly but surely going completely crazy with the HTML5 web storage and application cache.

Here is my example: http://daviddarx.com/stuffs/work/custom/54/

The cache manifest is valid and tested on http://manifest-validator.com/ : http://daviddarx.com/stuffs/work/custom/54/cache.manifest

As it wasn't working, I took a really simple working example and then tried to add my part of codes and data step by step, with few additions and then I tested it again.

When I start with the simple example, everything just work great. If I put my iPhone on plane mode, I get a offline message when launching the website, but then I can view the result.

When I add a few of my assets (HTML code in the page, 1-2 images, etc), it's still working.

If I then add more of assets (for example, the css and all the images associated), the problems begin... If I go into plane mode and then open the page, I have the normal message (the one I get when it's working), with then another message, asking me to retry or to cancel. If I cancel, the site just don't show and the app closes, and if I push the retry button, I get the same message again and again....

I really don't know what to do about that. Each I time validated my cache manifest before testing, and each time I changed the URL to be sure everything is reset.

Does this have something to tho with the weight of the cached files? Is there a limit of size or files?

Another remark: I always check my pages in the console on my computer before testing, to be sure that's it's not a manifest problem. Indeed, each try get successful on the desktop browser, with all the assets loaded.

Do you know where that could come from?

---

EDIT: I did a lot of tests again and still can't get it to work.

Here is a abstract of the situation:

1. Here is the version I am testing: http://daviddarx.com/stuffs/work/custom/61/

2. This is my cache manifest: http://daviddarx.com/stuffs/work/custom/61/manifest.appcache It's completely valid according to http://manifest-validator.com/.

3. When I load the page on chrome (desktop) and show at the console, everything is ok. All elements are cached, and if I refresh, the cache is ok.

4. When I load the page on my desktop chrome and look at the network panel, I can see that everything is loaded from the cache. There isn't any missing file.

5. When I disconnect my desktop computer from any internet, it's working! If I browse the website with chrome without any connection, I can display the pages and everything is just fine, as I would expect it to be on my Iphone.

6. When i use my IPhone and visit the website the first time, everything is ok. There isn't any error in mobile safari's console. If I turn on the "plane mode" and the go back to safari, I can display the page on which I was (which I previously couldn't achieve). But then, if I try to change the page, it just warns me "Impossible to open the page", and then cancels the request. I can only stay on the current page.

Everything is just perfect on my desktop computer but it's just not working on my Iphone.

Do you have any idea? Could you try it on your desktop and iphone browser?

Answer 1

Analyzed your /61/ test version:

The JS function preloadDetailImages pulls out the background-image URL from the CSS class content and puts it as src attribute into a new Image object. This image is then added to the DOM, apparently to let the browser preload it. However the double-quotes around the URL in the CSS definition are not removed and therefore end up as part of the src attribute value. This produces a corrupt URL that is obviously not cached and therefore not working offline.

This is the CSS definition:

#websiteContainer #customContainer .content {
    background-image: url("../images/custom_part_background.jpg");
}

With this JS code you extract everything inside url(), including the double-quotes:

$($(".content")[actualImageLoadingID]).css("background-image")
.split("url(")[1].split(")")[0]

And this is what ends up in the document (note the "s):

<img src="&quot;http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg&quot;" style="display: none;">

Since double-quote can be a valid URL part, the browser interprets this as relative path and tries to retrieve /stuffs/work/custom/61/%22http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg%22 from your server. I can see it in my http sniffer.

Solution: Remove the quotes in your CSS definition or filter them out in your JS function.

---

This is probably not the main reason for your caching problems on iPhone, and I would have rather added this as a comment, but have no privileges for it yet.