HTML5 - cache manifest working great on Chrome but not on Firefox and Opera

Asked 28/11, 2011 at 23:18 Answered 27/3, 2015 at 10:0

html firefox opera offline application-cache

I am developing a web app for offline use, thus I need to use the application cache functionality.

Everything works great on Chrome (15.0.874.106) but is doesn't work on Firefox (7.0.1) and Opera (11.52).

This is my cache manifest file cache.manifest.php (I have reduced it to the bare minimum):

<?php 
    header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
    header('Content-type: text/cache-manifest');
?>CACHE MANIFEST

CACHE:

/app/common/css/reset.css
/favicon.ico

And this is the first 4 lines of the "main" HTML document:

<!DOCTYPE html> 
<html manifest="/app/mobile/cache.manifest.php"> 
    <head> 
    <title>MyApp Mobile</title>

When I try and load the cache manifest (http://www.myapp.com/app/mobile/cache.manifest.php) into the browser the file is displayed correctly but when I try to load the page once offline I get the "Unable to connect" error page. Again, that just happens on Firefox and Opera.

Firebug says "0 items in offline cache" and I didn't find the way to check the application cache on DragonFly.

I am getting mad and I don't know how to debug the problem effectively on Firefox and Opera. Please help.

Thanks, Dan

Prankster answered 28/11, 2011 at 23:18 Comment(8)

Just to make sure, you did open the "main" HTML document first and allowed Firefox to store data offline for your site? You didn't state that explicitly. Is the simplified non-working version available somewhere online? I bet that would make it easier to answer. – Itinerancy 3/12, 2011 at 17:5

Good point: I did give Firefox the chance to store the cache manifest by having the Internet on. Once I turn the Internet off and I reload the page, it doesn't work anymore - it gives me the "Unable to connect" message. – Prankster 3/12, 2011 at 19:14

@dan, why don't you add the main page to the cache.. – Stove 4/12, 2011 at 10:52

@muntoo: as I was saying, I am getting mad. It had been almost a year I wasn't stopped so long by a technical product. – Prankster 4/12, 2011 at 11:49

@Gaby: the main page should be cached by default, I read. By you are right, I am going to try that. – Prankster 4/12, 2011 at 11:50

Can you fiddle your cache.manifest.php ? – Donahoe 4/12, 2011 at 15:24

Do you have a live demo we can poke around with? – Ovation 10/12, 2011 at 11:13

Just if anyone is having the same problem I had: if you have a PHP file in your cache, by default, its headers will be set to no-store, no-cache, etc.. Firefox apparently will not cache PHP files (even with application cache). I had to set the headers manually and reset the application cache for it to work. (e.g. session_cache_limiter('public');) – Zoi 5/9, 2012 at 4:11

In my experience using the HTML5 AppCache, it is great once you get it working, but extremely brittle. If there's the tiniest thing wrong with it the browser ignores the entire file and, annoyingly, rather than use the browser's ordinary cache, re-loads everything from scratch off the server.

Worse, browsers will not re-load the manifest file unless its text content changes. So you might tweak your server headers or something to fix it, but unless the content of cache.manifest.php changes the browser will blindly ignore it and do exactly what it did last time. So it could have been broken, then you fixed it, but browsers are ignoring the changes because the text content of cache.manifest.php hasn't changed. This even seems to be immune to clearing your browser cache, which is part of what makes it so confusing - app cache is really, really serious about caching.

To get around this, text changes in comments count, so have a comment at the top with a version or timestamp or the date (e.g. # Version 1.2) and change that when you want the browser to "notice".

Then, the browser still won't immediately use it! The way the app cache works is the next time you load the page it will do exactly what it did last time yet again, and start checking for an update in the background. So you probably want the console up, wait for something like "updating..." then "complete", then hit Refresh and the browser will finally start using the new version. At last!

All in all it can be a right pain to get working. However, once it's working it's almost bulletproof: you can pretty much rest assured anything listed in the cache manifest is only every downloaded once, ever, for all time, per user, until you change the text content of the file.

Browser standards compliance is pretty good these days, so my best guess is you actually have it working, but you checked Chrome last and it's the only browser which has cached the manifest file correctly. During development you might have had it broken, but Firefox and Opera are clutching their old manifest files to the death. I bet you also tried clearing the browser cache in Firefox and Opera, which probably did nothing - you need to change the text content of the file and double-refresh before either Firefox and Opera will finally give up their broken versions of the manifest file and start using the one which works which you probably uploaded ages ago.

Ovation answered 4/12, 2011 at 15:16 Comment(2)

Thanks for your help. The fact is the app cache doesn't work at all - it is not a problem of using an old version of it. – Prankster 4/12, 2011 at 15:56

Another solution is to generate your cache manifest file and include the MD5 of all files within the manifest. In that way, if ANY file changes, the manifest changes (because the MD5 of the file has changed). – Corm 27/5, 2014 at 9:35

From: http://appcache.offline.technology

In Firefox, any resources served with Cache-control: no-store will not be cached, even if they're explicitly included in the manifest.

My php by default is sending:

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0

It is enough to add:

header("Cache-Control: no-cache, must-revalidate");

To the php file to get it to start caching it.

(This is similar to Mychal Hackman's answer, but a little more specific).

Preexist answered 23/1, 2013 at 1:59 Comment(0)

To me your cache manifest looks a bit "unusual"... it might help to add a FALLBACK section... another point is that the appcache might interfer with the "normal browser cache" i.e. if the cache manifest is changed it needs to make sure that the browser reloads it, ideally this is achieved by changing the name (for example by having version number, timestamp... as part of the name).

You can interact in your page with the appcache via JS which could help to pinpoint the problem you see.

For in-depth information including JS code and a thorough walk-through see

If need be come back with specific questions.

UPDATE

As per comments provided by OP this shows a nice implementation of the JS API for checking/debugging appcache as described in the links above.

Mudd answered 4/12, 2011 at 6:58 Comment(2)

This can be a good link on how to debug appcache with JS: jonathanstark.com/blog/2009/09/27/… – Prankster 4/12, 2011 at 12:21

@dan you are welcome :-) yes, the link provides a nice implementation... added it to the answer for future reference. – Mudd 4/12, 2011 at 12:27

You can check the current status of the application cache using window.applicationCache.status, which returns a numeric value mapped to the following states: 0 - uncached, 1 - idle, 2 - checking, 3 - downloading, 4 - updateready, 5 - obsolete.

The application cache API has a few things worth noting: window.applicationCache.update(): This will trigger the application cache download process, which is nearly the same as reloading the page. It simply checks if the manifest has changed, and if so downloads a fresh version of all the content in the cache (respecting any cache headers). Note that even though a new cache is created with this, the page will continue to use the old cache. To make the page use the new cache you have just downloaded, you must use the swapCache() function.

window.applicationCache.swapCache(): This function tells the browser to start using the new cache data if it is available. It is important to note that even if there is a new manifest file, the application will still continue using the old cache (as specified in the old manifest file) untill swapCache() is called. Once swapCache() is called, then the cache will be used as specified from the new manifest file.

from: http://dev.opera.com/articles/view/offline-applications-html5-appcache/

Archibold answered 5/12, 2011 at 17:52 Comment(0)

Check your cache in about:cache. I am betting you will see "data-size 0 bytes" for your PHP file(s).

Check your caching headers, I found in Firefox the default was "no-cache" on my php files. I just added:

header("Pragma: public");
header("Cache-Control: public, max-age=6000");

to my PHP file and reloaded the offline cache and it is finally working.

HTH

Haphazard answered 9/12, 2011 at 17:16 Comment(0)

Try removing:

header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");

so that you are only sending the Content-type header:

<?php header('Content-type: text/cache-manifest'); ?>

ApplicationCache forces caching (oversimplifying, but not by much). Those first three headers are ways to prevent caching.

Opera appears to prevent caching when those headers are present. Firefox' debugging tools are a bit wonky when it comes to debugging AppCache, but it's probably save to assume this will fix it there as well.

Murial answered 5/12, 2011 at 22:51 Comment(4)

Interesting point, webinista. The only problem I can foresee (and a big one) is that browsers will not update the cache manifest even if its content changes, as the file will be cached. Any thoughts on that? Have you got any link supporting your theory? – Prankster 5/12, 2011 at 23:41

Hrm. It looks like these headers won't make much difference after all. That said, browsers WILL update the cache if the cache manifest file changes. So if you make a change in reset.css, change cache.manifest.php as well by adding or changing a comment. One other thing to try: add the manifest attribute using JavaScript. – Murial 6/12, 2011 at 21:41

"add the manifest attribute using JavaScript" - interesting idea: how do you think that help? Also, when should I add it? – Prankster 7/12, 2011 at 10:56

Well, I had a similar problem where sending Cache-control: no-store caused Firefox to reject the manifest (window.applicationCache error event was called). So, apparently Firefox is sensitive to the HTTP headers. OTOH, Firefox accepts Cache-control: no-cache, Pragma: no-cache and Expires: 0 – Flagship 20/3, 2014 at 10:29

For Firefox, try this little trick:

<html manifest="/app/mobile/cache.manifest.php?1">

Its the "?1" that finally get Firefox to check for the latest file. That's what did the trick for me anyway. Hope this helps.

Hydroponics answered 21/5, 2014 at 3:22 Comment(0)

From my experience with getting a site working offline on the iPad:

The name of the file needs to end with .manifest
The mime type needs to be text/cache-manifest
Have a version in the comments of your manifest
Create some javascript functions using window.applicationCache... to check if the browser sees a change in the manifest and to reload the content, also capture the status events and display them somewhere

Cosecant answered 9/12, 2011 at 20:55 Comment(1)

You don't need to include the html page itself, it's included automatically. – Singly 20/3, 2012 at 9:14

I had a similar problem. I am very late in answering but this might be helpful for others. Make sure you dont run into problems described by AshleysBrian in his answer. Adding to that

Make sure the manifest file is served as type "text/cache-manifest"
Dont try it out in Private Browsing mode in Firefox/IE. It only works in regular browsing mode. But it works in both modes in Chrome

While offline, a simple change in the URL could be a problem

Eg: http://localhost:8080/app doesn't work on Firefox/IE
but http://localhost:8080/app/ works in Firefox/IE

Both of them work in Chrome

Use these handy resource viewers to get more detailed perspective

about:cache - Firefox
chrome://appcache-internals/ - Chrome
Pls fill in if someone knows what is it for IE

Stalingrad answered 9/4, 2014 at 16:26 Comment(0)

As I understand, the Offline Web applications section in the W3C HTML5 draft is non-normative; meaning that is it still not part of the formal HTML5 standard as yet.

Since the feature is still not part of the HTML5 standard, different browsers may have different and varying/non-standard implementations, if at all they choose to implement it. Not all browsers may choose to support it. Do not rely on non-normative features until they are part of the standard.

Retrace answered 4/12, 2011 at 7:48 Comment(5)

None of HTML5 is "formal standard" due to the speed of the W3C process. – Itinerancy 4/12, 2011 at 8:31

Only Parts of the HTML5 specifications have been standardised. The implementation of the normative features work across all the browsers well while non-normative do not. So, dont expect that IE, firefox, opera etc. will work the same way in the absence of a standard specification. – Retrace 4/12, 2011 at 9:31

The OP doesn't expect it to work the same way, he asks for suggestions on a specific issue and on debugging it. I'm not arguing your assertion, I'm just saying it's not an answer to the question :) – Itinerancy 4/12, 2011 at 10:40

@Vikas, thanks for your answer but I have checked on the Internet and the versions of Firefox and Opera I am using both support application cache. – Prankster 4/12, 2011 at 11:59

@dan, I suggest to refer the specific browser documentations on syntax and semantics of the feature supported. You probably need to add specific implementation for each browser. – Retrace 5/12, 2011 at 6:49

I've found something similar, and tracked it down to the Cache-Control: no-store heading on the manifest. Chrome accepts this, but Firefox fails silently with this.

My tests showed that you can keep no-cache headers & expires headers in to ensure frequent refreshes.

Phoney answered 30/9, 2014 at 10:40 Comment(0)

My only way to make the manifest work everywhere is to do this:

CACHE MANIFEST
# version x.x
# 2015-03-27

# list everything

If I use NETWORK and/or FALLBACK it wont work (in Chrome).

Paralyse answered 27/3, 2015 at 10:0 Comment(0)

-1

I had the same problem also. Everything worked fine in Chrome and IE, but an "Unable to connect" message in FF.

After hours of despair, i found the solution and it was ridiculous simple: In the developer-toolbar the entire cache was deactivated. :/

Lorin answered 6/10, 2014 at 10:41 Comment(2)

While this may answer the question, please could you expand by adding more detail to your answer. As it stands, you've not really explained how to go about fixing the issue. – Lcm 6/10, 2014 at 10:51

You must be more explicit for your answer – Paralyse 26/3, 2015 at 16:9

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags