21

我正在开发一个供离线使用的网络应用程序，因此我需要使用应用程序缓存功能。

在 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 上有效地调试问题。请帮忙。

谢谢，丹

4

13 回答 13

15

根据我使用 HTML5 AppCache 的经验，一旦你开始使用它就很棒，但非常脆弱。如果它有最微小的问题，浏览器会忽略整个文件，并且令人讨厌的是，它不是使用浏览器的普通缓存，而是从头开始重新加载服务器上的所有内容。

更糟糕的是，浏览器不会重新加载清单文件，除非其文本内容发生变化。因此，您可能会调整您的服务器标头或其他东西来修复它，但除非cache.manifest.php 更改内容，否则浏览器会盲目地忽略它并完全按照上次所做的那样做。所以它可能已经坏了，然后你修复了它，但是浏览器忽略了这些变化，因为文本内容cache.manifest.php没有改变。这甚至似乎对清除浏览器缓存免疫，这是使它如此混乱的部分原因 - 应用程序缓存对缓存非常非常认真。

为了解决这个问题，评论中的文本更改计数，因此在顶部有一个带有版本或时间戳或日期（例如# Version 1.2）的评论，并在您希望浏览器“通知”时更改它。

然后，浏览器仍然不会立即使用它！应用缓存的工作方式是下次加载页面时，它会再次执行上次的操作，并开始在后台检查更新。因此，您可能希望控制台启动，等待“更新...”然后“完成”之类的内容，然后点击刷新，浏览器最终将开始使用新版本。最后！

总而言之，开始工作可能是一种痛苦。但是，一旦它开始工作，它几乎是万无一失的：您几乎可以放心，缓存清单中列出的任何内容都只会每次下载一次，永远，永远，每个用户，直到您更改文件的文本内容。

这些天浏览器标准合规性非常好，所以我最好的猜测是您实际上可以正常工作，但是您最后检查了 Chrome，它是唯一正确缓存清单文件的浏览器。在开发过程中，你可能已经把它弄坏了，但 Firefox 和 Opera 死死地抓住了他们的旧清单文件。我敢打赌，您还尝试清除 Firefox 和 Opera 中的浏览器缓存，这可能什么也没做 - 您需要更改文件的文本内容并在 Firefox 和 Opera 最终放弃其损坏的清单文件版本之前进行两次刷新开始使用您可能在很久以前上传的那个有效的。

于 2011-12-04T15:16:27.157 回答
9

来自：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 的回答，但更具体一些）。

于 2013-01-23T01:59:15.027 回答
3

对我来说，您的缓存清单看起来有点“不寻常”......添加一个FALLBACK部分可能会有所帮助......另一点是appcache可能会干扰“普通浏览器缓存”，即如果缓存清单被更改，它需要进行确保浏览器重新加载它，理想情况下这是通过更改名称来实现的（例如，通过将版本号、时间戳...作为名称的一部分）。

您可以通过 JS 在页面中与 appcache 进行交互，这有助于查明您看到的问题。

有关包括 JS 代码和彻底演练在内的深入信息，请参阅

如果需要返回具体问题。

更新

根据 OP 提供的评论，这显示了用于检查/调试 appcache 的 JS API 的一个很好的实现，如上面的链接中所述。

于 2011-12-04T06:58:41.747 回答
3

您可以使用 来检查应用程序缓存的当前状态window.applicationCache.status，它返回一个映射到以下状态的数值： 0 - uncached, 1 - idle, 2 - checking, 3 - downloading, 4 - updateready,5 - obsolete.

应用缓存API有几点值得注意： window.applicationCache.update()：这将触发应用缓存下载过程，这几乎与重新加载页面相同。它只是检查清单是否已更改，如果是，则下载缓存中所有内容的新版本（尊重任何缓存标头）。请注意，即使使用它创建了新缓存，页面仍将继续使用旧缓存。要使页面使用您刚刚下载的新缓存，您必须使用该swapCache()功能。

window.applicationCache.swapCache()：此函数告诉浏览器开始使用新的缓存数据（如果可用）。需要注意的是，即使有新的清单文件，应用程序仍将继续使用旧缓存（如旧清单文件中指定的那样），直到swapCache()被调用。一旦swapCache()被调用，缓存将按照新清单文件中的指定使用。

来自： http ://dev.opera.com/articles/view/offline-applications-html5-appcache/

于 2011-12-05T17:52:43.363 回答
3

检查您的缓存在about:cache. 我打赌你会看到你的 PHP 文件的“data-size 0 bytes”。

检查您的缓存标头，我发现在 Firefox 中，我的 php 文件中的默认设置是“无缓存”。我刚刚补充说：

header("Pragma: public");
header("Cache-Control: public, max-age=6000");

到我的 PHP 文件并重新加载离线缓存，它终于可以工作了。

高温高压

于 2011-12-09T17:16:03.467 回答
2

尝试删除：

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");

这样您就只发送 Content-type 标头：

<?php header('Content-type: text/cache-manifest'); ?>

ApplicationCache 强制缓存（过于简单，但不是很多）。前三个标头是防止缓存的方法。

当存在这些标头时，Opera 似乎会阻止缓存。Firefox 的调试工具在调试 AppCache 时有点不稳定，但假设这也能修复它可能是省事的。

于 2011-12-05T22:51:34.407 回答
2

对于 Firefox，试试这个小技巧：

<html manifest="/app/mobile/cache.manifest.php?1">

它的“?1”最终让 Firefox 检查最新文件。无论如何，这就是我的诀窍。希望这可以帮助。

于 2014-05-21T03:22:47.773 回答
1

我有一个类似的问题。我回答得很晚，但这可能对其他人有帮助。确保您不会遇到 AshleysBrian 在他的回答中描述的问题。除此之外

  1. 确保清单文件作为“text/cache-manifest”类型提供
  2. 不要在 Firefox/IE 的隐私浏览模式下尝试。它仅适用于常规浏览模式。但它在 Chrome 中的两种模式下都有效

  3. 离线时，对 URL 的简单更改可能会出现问题

    Eg: http://localhost:8080/app doesn't work on Firefox/IE
but http://localhost:8080/app/ works in Firefox/IE

    他们都在 Chrome 中工作

  4. 使用这些方便的资源查看器获得更详细的视角

    about:cache - Firefox
chrome://appcache-internals/ - Chrome
Pls fill in if someone knows what is it for IE
于 2014-04-09T16:26:30.347 回答
1

根据我在 iPad 上让网站离线工作的经验：

  • 文件名需要以.manifest
  • mime 类型必须是text/cache-manifest
  • 在清单的评论中有一个版本
  • 创建一些 javascript 函数，window.applicationCache...用于检查浏览器是否看到清单中的更改并重新加载内容，还捕获状态事件并将它们显示在某处

另请参阅：http: //developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW1

于 2011-12-09T20:55:19.117 回答
0

据我了解，W3C HTML5 草案中的离线 Web 应用程序部分是非规范性的；这意味着它仍然不是正式的 HTML5 标准的一部分。

由于该功能仍然不是 HTML5 标准的一部分，不同的浏览器可能有不同的和变化的/非标准的实现，如果他们选择实现它的话。并非所有浏览器都可以选择支持它。在非规范性特征成为标准的一部分之前，不要依赖它们。

于 2011-12-04T07:48:19.553 回答
0

我使清单在任何地方都能工作的唯一方法是这样做：

CACHE MANIFEST
# version x.x
# 2015-03-27

# list everything

如果我使用NETWORK和/或FALLBACK它不起作用（在 Chrome 中）。

于 2015-03-27T10:00:47.143 回答
0

我发现了类似的东西，并将其追踪到清单上的 Cache-Control: no-store 标题。Chrome 接受这一点，但 Firefox 会默默地失败。

我的测试表明，您可以保留无缓存标头和过期标头以确保频繁刷新。

于 2014-09-30T10:40:47.003 回答
-1

我也有同样的问题。在 Chrome 和 IE 中一切正常，但在 FF 中出现“无法连接”消息。

经过数小时的绝望，我找到了解决方案，这非常简单：在开发人员工具栏中，整个缓存都被停用了。：/

于 2014-10-06T10:41:11.627 回答