dan*_*dan 22 firefox html5 opera offline application-cache
我正在开发一个供离线使用的Web应用程序,因此我需要使用应用程序缓存功能.
一切都在Chrome(15.0.874.106)上运行良好,但在Firefox(7.0.1)和Opera(11.52)上不起作用.
这是我的缓存清单文件cache.manifest.php(我已将其减少到最低限度):
<?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
这是"主要"HTML文档的前4行:
<!DOCTYPE html>
<html manifest="/app/mobile/cache.manifest.php">
<head>
<title>MyApp Mobile</title>
当我尝试将缓存清单(http://www.myapp.com/app/mobile/cache.manifest.php)加载到浏览器中时,文件显示正确,但是当我尝试离线加载页面时,我得到了"无法连接"错误页面.再次,这恰好发生在Firefox和Opera上.
Firebug说" 0 items in offline cache"并且我没有找到检查DragonFly上的应用程序缓存的方法.
我生气了,我不知道如何在Firefox和Opera上有效地调试问题.请帮忙.
谢谢,丹
Ash*_*ain 15
根据我使用HTML5 AppCache的经验,一旦你开始工作它就很棒,但非常脆弱.如果有最小的问题,浏览器会忽略整个文件,而且令人烦恼的是,不是使用浏览器的普通缓存,而是从头开始从服务器重新加载所有内容.
更糟糕的是,除非文本内容发生变化,否则浏览器不会重新加载清单文件.因此,您可能会调整服务器标题或其他内容来修复它,但除非更改内容,否则浏览器将盲目地忽略它并完全按照上次的方式执行操作.所以它可能已被破坏,然后你修复它,但浏览器忽略了这些变化,因为文本内容没有改变.这甚至似乎不会清除你的浏览器缓存,这是令人困惑的一部分 - 应用程序缓存真的非常,非常严重的缓存.cache.manifest.php cache.manifest.php
要解决此问题,注释中的文本更改会发生变化,因此请在顶部添加注释,其中包含版本或时间戳或日期(例如# Version 1.2),并在您希望浏览器"注意"时更改该注释.
然后,浏览器仍然不会立即使用它!应用程序缓存的工作方式是下次加载页面时,它将完成上次再次执行的操作,并开始在后台检查更新.所以你可能想要控制台,等待"更新......"然后"完成",然后点击刷新,浏览器最终将开始使用新版本.最后!
总而言之,开始工作可能是一种正确的痛苦.但是,一旦它的工作,它几乎防弹:你几乎可以放心在缓存清单中列出任何只每下载一次,永远,直到你更改文件的文本内容,所有的时间,每个用户.
这些天浏览器标准的合规性非常好,所以我最好的猜测是你确实让它工作了,但你最后检查了Chrome,它是唯一正确缓存了清单文件的浏览器.在开发过程中你可能已经破坏了它,但Firefox和Opera正在抓住他们的旧清单文件.我打赌你还尝试清除Firefox和Opera中的浏览器缓存,它可能什么也没做 - 你需要更改文件的文本内容并进行双重刷新,之后Firefox和Opera最终会放弃清单版本的清单文件和开始使用你很久以前上传过的那个.
来自:http://appcache.offline.technology
在Firefox中,任何使用Cache-control:no-store提供的资源都不会被缓存,即使它们明确包含在清单中.
我的PHP默认发送:
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
这足以添加:
header("Cache-Control: no-cache, must-revalidate");
到php文件让它开始缓存它.
(这与Mychal Hackman的答案类似,但更具体一点).
对我来说，您的缓存清单看起来有点“不寻常”...它可能有助于添加一个FALLBACK部分...另一点是应用程序缓存可能会干扰“正常浏览器缓存”，即如果缓存清单发生更改，则需要进行确保浏览器重新加载它，理想情况下，这是通过更改名称来实现的（例如通过将版本号、时间戳...作为名称的一部分）。
您可以通过 JS 在页面中与应用程序缓存进行交互，这有助于查明您看到的问题。
有关 JS 代码和彻底演练的深入信息，请参阅
如果需要的话，我们会带着具体问题回来。
更新
根据 OP 提供的注释，这显示了 JS API 的一个很好的实现，用于检查/调试应用程序缓存，如上面的链接所述。