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条回答
Root(大扎)
2楼-- · 2019-01-23 03:16

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

See also: http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW1

查看更多
神经病院院长
3楼-- · 2019-01-23 03:18

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. :/

查看更多
放我归山
4楼-- · 2019-01-23 03:19

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.

查看更多
叼着烟拽天下
5楼-- · 2019-01-23 03:26

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

查看更多
兄弟一词,经得起流年.
6楼-- · 2019-01-23 03:26

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/

查看更多
成全新的幸福
7楼-- · 2019-01-23 03:30

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.

查看更多
登录 后发表回答