HTML5离线奇怪行为答案

【问题标题】：HTML5 offline strange behaviourHTML5离线奇怪行为
【发布时间】：2012-02-02 06:05:34
【问题描述】：

我正在开发一个网络应用程序时遇到问题，我发布了一个问题here，这有点含糊，可能不是很有帮助。我决定创建一个非常基本的站点，并将其构建为像主应用程序一样，看看它在哪里中断。我已经这样做了，并立即被离线缓存卡住了。

这是一个在 IIS 7.5 本地托管的基本 3 页静态网站。我创建了文件夹 c:\inetpub\wwwroot\ManifestTesting，将其作为 Web 应用程序添加到 IIS，并为 .appcache 扩展添加了一个新的 MIME 类型的 text/cache-manifest。我也在使用 FireFox 9.0 进行测试，因为它具有离线模式功能。

我创建了 3 个 html 页面并将它们添加到 ManifestTesting 文件夹中：

index.htm - 此页面包含 2 个指向 page1.htm 和 page2.htm 的链接
page1.htm - 只包含一个标题为第 1 页
page2.htm - 只包含一个标题为第 2 页

所以现在如果我浏览到http://localhost/manifesttesting，如果获取索引页面并可以导航到 2 个页面。

然后我创建了一个名为 manifest.appcache 的文件并将其添加到 ManifestTesting 文件夹：

CACHE MANIFEST

CACHE:
index.htm
page1.htm
page2.htm

并在 index.htm 中添加了对清单文件的引用：

<html manifest="manifest.appcache">

因此，如果我清除所有历史记录并浏览到 index.htm，FireFox 会询问我是否要允许网站存储数据以供离线使用。我单击允许，将浏览器切换到离线模式，然后尝试导航到 page1.htm，它工作正常！所以到目前为止一切都很好。

现在说一下我不明白的部分。然后，我在 ManifestTesting 文件夹中创建了一个名为“pages”的新文件夹，并将 page1 和 page2 移入其中。我更新了索引中的链接以引用新位置，如果我在没有清单引用的情况下浏览网站，一切都会像以前一样正常工作。然后我重新引用索引中的清单文件并将清单更新为：

CACHE MANIFEST

CACHE:
index.htm
pages/page1.htm
pages/page2.htm

然后我清除历史记录，刷新，firefox 要求允许网站存储离线数据，启用离线模式，然后尝试导航到 page1 - 它不起作用！ FireFox 告诉我它处于离线模式，无法浏览网页！

我做错了什么？

【问题讨论】：

标签： html offline-caching offline-mode offline-browsing

【解决方案1】：

这里可能有几种可能性：

1) 你可以尝试输入“/pages/page1.htm”而不是“pages/page1.htm”

2) 还要确保所有链接和您在浏览器上键入的内容都区分大小写。（'pages/page1.htm' 和 'pages/Page1.htm' 不一样）

3) 你提到你清除了历史记录...如果你这样做是为了测试，你也需要清除物理文件缓存，而不仅仅是历史记录。

4) 这可能是最可能的原因：当您更改清单文件并刷新浏览器时，会发生这种情况（假设您在线）

浏览器首先加载回缓存中的所有文件
然后浏览器在线检查您的清单文件
它检测到清单文件已更改，然后继续下载新文件
但是，此时您仍会查看“旧文件”，因为浏览器在上线下载“新文件”之前已经加载了旧文件
如果此时，如果你点击刷新再次（第二次），您应该获得“新文件”（离线后您将能够转到第 1 页和第 2 页

这是目前的标准行为。有些人放置了一些事件处理程序来提示用户进行另一次刷新（在第一次刷新之后）

【讨论】：