2

我一直在试图弄清楚 HTML5 的新 AppCache，但我觉得这里非常有限。

假设我有一个有四个页面的网站：

index.html
about.html
portfolio.html
contact.html

我有清单中列出的上述资源，以及网站的所有资源。清单如下所示：

CACHE MANIFEST
# 2013-05-23 2:33 PM

# Master Manifest
index.html
about.html
portfolio.html
contact.html
styles/reset.css
styles/styles.css

NETWORK:
*

我已将 appcache 文件类型添加到服务器配置中，并在上面列出的每个页面上使用了正确的 HTML 标记属性。仅作记录，该元素如下所示：

<html lang="en" manifest="example.appcache">

我已经在我的移动设备上测试了这个设置，一切都很好......除非我不加载每一页。看来我必须通过我的移动浏览器访问每个页面并对其进行缓存，之后我可能会关闭 DATA 并离线以便我的设备能够浏览 APPCACHE 的网站。

但是，这是我的问题 - 如何设置 AppCache 以允许我转到 index.html、缓存该页面并缓存清单中的其余资源？无需访问和手动缓存每个资源？

如果您不能，那么我将不得不问；这不是打败 AppCache 和 Offline Accessibility 背后的想法吗？

非常感谢大家的帮助！:)

4

4 回答 4

3

您不需要访问每个页面。我知道您提到您已经在 Apache 中设置了 MIME 类型，但是您是否 100% 确定它工作正常？

您可以通过在浏览器中打开清单并检查 Chrome Web Inspector 的网络选项卡中的响应标头来检查它：

缓存清单 MIME 类型

Content-Type应该text/cache-manifest

在无法访问您的站点的情况下进行调试有点困难，但这里有一些说明，说明如何使用 AppCache 解释 Chrome 的 Web Inspector 中发生的情况，以帮助您自己调试问题：

Resources 选项卡将显示应用程序缓存的内容和状态。它在下载文件时看起来像这样：

在此处输入图像描述

控制台在下载时也会记录事件：

Application Cache Progress event (0 of 48) http://cachedfile.url

下载完成后，它将如下所示，并显示缓存文件列表：

在此处输入图像描述

当您返回时，它将记录三个事件（假设没有任何更改）：

Document was loaded from Application Cache with manifest http://manifest.url

Application Cache Checking event

Application Cache NoUpdate event

然后当你离线时它看起来像这样：

在此处输入图像描述

希望在控制台和 appcache 表之间，您能够弄清楚发生了什么。

于 2013-05-31T05:44:32.693 回答
2

appcache 只会在第一次下载时存储缓存。它只是一个文件列表，上面写着，当它第一次下载时，缓存它。

您可以做的是在后台加载后执行 ajax 调用来加载每个预期的资源，但这并不是特别漂亮。

所以在我看来，它的表现应该是这样的。

缓存：

这是条目的默认部分。在此标题下（或在 CACHE MANIFEST 之后）列出的文件将在第一次下载后被显式缓存。 http://www.html5rocks.com/en/tutorials/appcache/beginner/

艾哈迈德

于 2014-03-04T11:40:39.110 回答
2

清单文件是正确的，您无需访问每个页面即可在手机中缓存。如果这是您的手机或浏览器的问题，并且您已在服务器文本/缓存清单 MIME 类型中定义，您可以尝试。

于 2013-05-29T00:15:30.627 回答
1

访问您的网站时，我得到以下信息：

使用清单http://www.iamaaron.com/appcache/example.appcache创建应用程序缓存

应用程序缓存检查事件

应用程序缓存下载事件

应用程序缓存进度事件 (0 of 6) http://www.iamaaron.com/appcache/styles/reset.css

应用程序缓存进度事件 (1 of 6) http://www.iamaaron.com/appcache/index.html

应用程序缓存进度事件 (2 of 6) http://www.iamaaron.com/appcache/contact.html

应用程序缓存进度事件 (3 of 6) http://www.iamaaron.com/appcache/attendees.html

应用程序缓存进度事件 (4 of 6) http://www.iamaaron.com/appcache/events.html

应用程序缓存进度事件 (5 of 6) http://www.iamaaron.com/appcache/styles/styles.css

应用程序缓存错误事件：资源获取失败 (404) http://www.iamaaron.com/appcache/styles/styles.css

因此，尽管它是空的，但它看起来工作正常Content-Type，除了似乎丢失的 CSS 文件（URL 错误，从外观上看应该是 main.css）。

但是我的开发人员工具没有显示应用程序缓存被填充，并且它在离线时不起作用。

尝试使用 CSS 修复您的 404 错误，并确保您的 apache 配置正确以返回正确的Content-Type，我认为这就是导致问题的原因。

于 2013-06-18T07:06:06.250 回答