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?

Tishtisha

When you run this in Chrome or Safari do you see any errors in the JS console? Do you have any items in the NETWORK section of the cache manifest? Can you post the cache manifest as it looks when you are getting prompted to retry/cancel? This typically indicates that something in the app is needing network access to a site not listed in the NETWORK section of the cache manifest. – Decanal

Hum, you're right, I just didn't manage the NETWORK section at all! Maybe the problem is coming from that. Here is the manifest: daviddarx.com/stuffs/work/custom/54/cache.manifest You're right with the networ access figure. I just didn't think about that. I'll try to analyse all what is called in the website, with the net tab of the inspector! Thank you for your input! – Tishtisha

There is a Problem: "Application Cache Error event: Resource fetch failed (404) daviddarx.com/stuffs/work/custom/61/mobile/php/mail.php" you should list this under Network: html5rocks.com/en/tutorials/appcache/beginner – Bloomington

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.

Grefe

Answer 2

You say that the problem start to occur when you add more assets. You are probably hitting the cache limit.

You can check this link for more background on HTML5 quotas: http://updates.html5rocks.com/2011/11/Quota-Management-API-Fast-Facts

Slinky