HTML5 离线应用程序缓存更新未在 Firefox 中显示
我的文档根目录中有一个index.php 文件。它生成以此开头的输出:
<!DOCTYPE html>
<html manifest="manifest.appcache">
manifest.appcache 告诉浏览器缓存它以供离线使用。同样,相关部分:
CACHE MANIFEST
#version 8-25-2011
CACHE:
#internal HTML documents
#this tells the browser to cache the HTML it retrieves from http://example.com/
/
NETWORK:
*
离线访问在该设置下工作正常,但更新无法像我在 Firefox 中所期望的那样工作。
在Chrome和Safari中,当我更新index.php文件,然后更改cache.manifest文件中的注释时,浏览器将获取新的index.php输出并在缓存中使用它。
然而,在 Firefox 中,它似乎并不关心我是否更新了 manifest.appcache 文件。我怀疑如果我等待足够长的时间,它就会更新,但我尝试过等待几个小时。
如何找到并消除缓存问题?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(2)
我知道我真的迟到了,但我多年来一直在 Firefox 中看到这个问题,并希望潜在的错误能够得到修复。
不幸的是,这并没有发生,但我终于想出了一个解决方法。就我而言,在加载和处理新的 .appcache 文件时,页面重新加载不会导致使用新缓存的版本。我使用的过程如下:
- 加载index.html并在html标记中指定.appcache文件。
- .appcache 文件是使用 PHP 脚本动态生成的。该脚本对所有包含的文件进行哈希处理以创建唯一的版本哈希值,该版本哈希值包含在清单中。这意味着清单中列出的任何文件的更改都会强制重新加载缓存。
我的 .htaccess 文件包含以下内容以防止缓存 .appcache 清单:
<文件 *.appcache>
过期有效日期
ExpiresDefault“访问加0秒”我的 Javascript 代码检测到应用程序缓存更新,并在获取更新的文件后重新加载页面:
appCache.addEventListener('updateready', function(e) {
console.log("Appcache更新完成,正在重新加载...");
setLoadingBar(100, "正在加载...");
appCache.swapCache();
位置.reload();
});一旦页面重新加载,旧的缓存仍然会在 Firefox 中使用,直到用户手动清除缓存。在我测试过的所有其他浏览器中,新缓存的文件会立即生效。
事实证明修复非常简单!
所需要做的就是更改 location.reload()
行以包含 true 参数:
location.reload(true)
这似乎表明 Firefox 提供以下位置的文件:这是正常的缓存,而不是使用应用程序缓存存储的文件,即使应用程序缓存的文件较新。我猜这是因为 Firefox 将正常的缓存机制放在 appcache 前面,如下所示:
Request ->普通缓存->应用程序缓存->网络请求
但这只是一个猜测。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您使用 index.php 文件发送哪些 HTTP 缓存标头?如果您没有设置诸如
Cache-control:
和Expires:
标头,那么 Firefox 可能会从常规缓存中刷新页面的应用程序缓存版本,而不是请求再次从服务器上获取。由问题发布者编辑:
对于任何想知道到底需要什么的人,这是我根据此答案和仔细阅读 "="" rel="nofollow">http://www.diveintohtml5.info/offline.html:
希望对下一个人有帮助!
What HTTP cache headers are you sending with your index.php file? If you've not set things like the
Cache-control:
andExpires:
headers then Firefox could be refreshing the application cache version of the page from it's regular cache instead of requesting it again from the server.EDIT BY POSTER OF THE QUESTION:
For anyone that wants to know what exactly it took, here's what I put in my .htaccess file based on this answer and a perusal of http://www.diveintohtml5.info/offline.html:
Hope that helps the next person!