使用 HTML5 的 AppCache 访问未缓存的文件？答案

【问题标题】：Access Uncached Files with HTML5's AppCache?使用 HTML5 的 AppCache 访问未缓存的文件？
【发布时间】：2013-05-23 20:34:28
【问题描述】：

我一直在尝试弄清楚 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 背后的理念吗？

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

【问题讨论】：

标签： html browser-cache offline html5-appcache

【解决方案1】：

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

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

Content-Type 应该是text/cache-manifest

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

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

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

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 表之间，您能够弄清楚发生了什么。

【讨论】：

我绝对理解你在说什么，但我什至没有在我的响应标头中看到 Content-Type。这是网站：iamaaron.com/appcache
我在下面回复了您网站的控制台输出

【解决方案2】：

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

【讨论】：

我已经在 Apache 上定义了 MIME 类型。那里没有问题。

【解决方案3】：

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

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

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

缓存：

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

艾哈迈德

【讨论】：

不错的答案。欢迎使用 Stackoverflow！

【解决方案4】：

我在访问您的网站时收到以下信息：

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

应用缓存检查事件

应用缓存下载事件

应用程序缓存进度事件（0 个，共 6 个） http://www.iamaaron.com/appcache/styles/reset.css

应用程序缓存进度事件（第 1 个，共 6 个） http://www.iamaaron.com/appcache/index.html

应用程序缓存进度事件（2 个，共 6 个） http://www.iamaaron.com/appcache/contact.html

应用程序缓存进度事件（3 个，共 6 个） http://www.iamaaron.com/appcache/attendees.html

应用程序缓存进度事件（4 个，共 6 个） http://www.iamaaron.com/appcache/events.html

应用程序缓存进度事件（5 个，共 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，我认为这就是导致问题的原因。

【讨论】：