HTML5 - 缓存清单在 Chrome 上运行良好，但在 Firefox 和 Opera 上运行不佳
我正在开发一个供离线使用的网络应用程序，因此我需要使用应用程序缓存功能。
一切在 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 个项目”，但我没有找到检查 DragonFly 上应用程序缓存的方法。
我很生气，我不知道如何在 Firefox 和 Opera 上有效地调试问题。 请帮忙。
谢谢， 担
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（13）
根据我使用 HTML5 AppCache 的经验，一旦你让它工作起来，它就很棒，但非常脆弱。如果有最微小的问题，浏览器会忽略整个文件，并且令人烦恼的是，它不会使用浏览器的普通缓存，而是从头开始从服务器重新加载所有内容。
更糟糕的是，浏览器不会重新加载清单文件，除非其文本内容发生变化。因此，您可能会调整服务器标头或其他内容来修复它，但除非
cache.manifest.php的内容发生变化，浏览器将盲目地忽略它并完全执行它上次做了什么。因此它可能已损坏，然后您修复了它，但浏览器忽略了更改，因为cache.manifest.php的文本内容没有更改。这甚至似乎不受清除浏览器缓存的影响，这也是它如此令人困惑的部分原因——应用程序缓存对于缓存来说真的非常非常重要。为了解决这个问题，评论计数中的文本会发生变化，因此在顶部添加带有版本或时间戳或日期的评论（例如
# Version 1.2），并在您希望浏览器“注意到”时进行更改”。然后，浏览器仍然不会立即使用它！应用程序缓存的工作方式是，下次加载页面时，它会再次执行上次执行的操作，并开始在后台检查更新。因此，您可能希望启动控制台，等待“正在更新...”，然后“完成”，然后点击“刷新”，浏览器最终将开始使用新版本。终于！
总而言之，开始工作可能会很痛苦。然而，一旦它开始工作，它几乎是无懈可击的：您几乎可以放心，缓存清单中列出的任何内容对于每个用户来说，每次下载都会一次，永远，直到您更改文件的文本内容。
如今浏览器标准合规性非常好，所以我最好的猜测是你实际上已经让它工作了，但你最后检查了 Chrome，它是唯一正确缓存清单文件的浏览器。在开发过程中你可能已经把它弄坏了，但是 Firefox 和 Opera 却紧紧抓住它们旧的清单文件不放。我敢打赌您也尝试过清除 Firefox 和 Opera 中的浏览器缓存，这可能没有任何作用 - 您需要更改文件的文本内容并进行两次刷新，然后 Firefox 和 Opera 最终会放弃其损坏的清单文件版本，并且开始使用您可能很久以前上传的有效工具。
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.phpchanges 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 ofcache.manifest.phphasn'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.
来自：http://appcache.offline.technology
我的 php 默认情况下发送：
添加：
到 php 文件以使其开始缓存它就足够了。
（这与 Mychal Hackman 的答案类似，但更具体一些）。
From: http://appcache.offline.technology
My php by default is sending:
It is enough to add:
To the php file to get it to start caching it.
(This is similar to Mychal Hackman's answer, but a little more specific).
对我来说，你的缓存清单看起来有点“不寻常”......它可能有助于添加一个
FALLBACK部分......另一点是应用程序缓存可能会干扰“正常的浏览器缓存”，即如果缓存清单更改后，需要确保浏览器重新加载它，理想情况下，这是通过更改名称来实现的（例如通过将版本号、时间戳...作为名称的一部分）。您可以通过 JS 在页面中与应用程序缓存进行交互，这有助于查明您看到的问题。
有关 JS 代码和完整演练的深入信息，请参阅
如果需要，请带着具体问题回来。
更新
根据OP提供的评论 this 显示了 JS API 的一个很好的实现，用于检查/调试应用程序缓存，如上面的链接所述。
To me your cache manifest looks a bit "unusual"... it might help to add a
FALLBACKsection... 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.
您可以使用
window.applicationCache.status检查应用程序缓存的当前状态，它返回映射到以下状态的数值：0 - 未缓存、1 - 空闲、2 - 检查、3 - 下载、4 - 更新就绪、5 - 已过时。应用程序缓存 API 有一些值得注意的事情：
window.applicationCache.update()：这将触发应用程序缓存下载过程，这与重新加载页面几乎相同。它只是检查清单是否已更改，如果是，则下载缓存中所有内容的新版本（尊重任何缓存标头）。请注意，即使由此创建了新的缓存，该页面仍将继续使用旧的缓存。要使页面使用刚刚下载的新缓存，必须使用swapCache()函数。window.applicationCache.swapCache()：此函数告诉浏览器开始使用新的缓存数据（如果可用）。需要注意的是，即使有新的清单文件，应用程序仍将继续使用旧的缓存（如旧清单文件中指定的），直到调用swapCache()为止。调用swapCache()后，将按照新清单文件中的指定使用缓存。来自： http://dev.opera .com/articles/view/offline-applications-html5-appcache/
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 theswapCache()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) untillswapCache()is called. OnceswapCache()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/
在
about:cache中检查您的缓存。我打赌您会看到 PHP 文件的“数据大小 0 字节”。检查你的缓存头，我发现在 Firefox 中我的 php 文件默认是“no-cache”。我刚刚添加：
到我的 PHP 文件并重新加载离线缓存，它终于可以工作了。
华泰
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:
to my PHP file and reloaded the offline cache and it is finally working.
HTH
尝试删除：
以便仅发送 Content-type 标头：
ApplicationCache 强制缓存（过度简化，但不是太多）。前三个标头是防止缓存的方法。
当这些标头存在时，Opera 似乎会阻止缓存。 Firefox 的调试工具在调试 AppCache 时有点不稳定，但假设这也能解决这个问题可能是明智的。
Try removing:
so that you are only sending the Content-type header:
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.
对于 Firefox，请尝试这个小技巧：
“?1”最终让 Firefox 检查最新文件。不管怎样，这就是对我有用的。希望这有帮助。
For Firefox, try this little trick:
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.
根据我在 iPad 上离线运行网站的经验：
.manifest结尾text/cache-manifestwindow.applicationCache...创建一些 javascript 函数来检查浏览器是否看到清单中的更改并重新加载内容，还捕获状态事件并显示他们在某处另请参阅：
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW1
From my experience with getting a site working offline on the iPad:
.manifesttext/cache-manifestwindow.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 somewhereSee also:
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW1
我有类似的问题。我回答得很晚，但这可能对其他人有帮助。确保您不会遇到 AshleysBrian 在其回答中描述的问题。添加到此
离线时，简单更改 URL 可能会出现问题
它们都可以在 Chrome 中运行
使用这些方便的资源查看器来获取更详细的视角
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
While offline, a simple change in the URL could be a problem
Both of them work in Chrome
Use these handy resource viewers to get more detailed perspective
据我了解，W3C HTML5 草案中的离线 Web 应用程序部分是非规范的；这意味着它还不是正式 HTML5 标准的一部分。
由于该功能仍然不是 HTML5 标准的一部分，因此不同的浏览器可能有不同的、变化的/非标准的实现，如果他们选择实现它的话。并非所有浏览器都可能选择支持它。在非规范功能成为标准的一部分之前，不要依赖它们。
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.
我发现了类似的东西，并追踪到清单上的 Cache-Control: no-store 标题。 Chrome 接受了这一点，但 Firefox 却默默地失败了。
我的测试表明您可以保留无缓存标头和使标头过期以确保频繁刷新。
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.
我让清单在任何地方工作的唯一方法是这样做：
如果我使用
NETWORK和/或FALLBACK它将无法工作（在 Chrome 中）。My only way to make the manifest work everywhere is to do this:
If I use
NETWORKand/orFALLBACKit wont work (in Chrome).我也有同样的问题。在 Chrome 和 IE 中一切正常，但在 FF 中出现“无法连接”消息。
经过几个小时的绝望之后，我找到了解决方案，而且非常简单：
在开发人员工具栏中，整个缓存已停用。
:/
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.
:/