HTML5 - cache manifest working great on Chrome but

2019-01-23 02:46发布

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

13条回答
可以哭但决不认输i
2楼-- · 2019-01-23 03:06

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

  1. Make sure the manifest file is served as type "text/cache-manifest"
  2. 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
  3. 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

  4. 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
    
查看更多
走好不送
3楼-- · 2019-01-23 03:08

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.

查看更多
smile是对你的礼貌
4楼-- · 2019-01-23 03:09

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

查看更多
走好不送
5楼-- · 2019-01-23 03:10

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.

查看更多
迷人小祖宗
6楼-- · 2019-01-23 03:10

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.

查看更多
Root(大扎)
7楼-- · 2019-01-23 03:14

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

查看更多
登录 后发表回答