离线无法在具有缓存清单的移动 Safari 中工作答案

【问题标题】：Offline not working in mobile Safari with cache manifest离线无法在具有缓存清单的移动 Safari 中工作
【发布时间】：2010-08-25 22:05:37
【问题描述】：

我正在为 iphone 开发一个移动网站。我添加了一个缓存清单，并在其中加载了离线功能所需的资源列表。清单文件具有正确的内容类型。如果查看文件的响应标头，则内容类型为 text/cache-manifest。清单文件在这里：

http://hoodisgood.clientsit.es/cache.manifest

可以在此处查看该网站（您需要在您的 iphone（或模拟器）或 Safari 上查看，并将用户代理设置为 iphone。

http://hoodisgood.clientsit.es/

查看该网站并将其添加到主屏幕后，我将我的 iPhone 设置为飞行模式，但当我尝试查看该网站时，却无法访问。我收到无法打开的警报，因为它没有连接到互联网。我已经在缓存清单文件中指定了离线操作所需的所有文件。

另外，如果我错了，请纠正我，但是使用缓存清单，即使设备在线，浏览器也不应该从缓存的源中读取吗？当我查看该站点时，我没有看到的照片是从服务器加载的，这是应该的。当我关闭并重新打开时，之前查看的图像仍在从服务器加载。

我做错了吗？我检查并重新检查，一切似乎都是正确的，只是不知道为什么它不起作用。

谢谢。

【问题讨论】：

标签： iphone caching mobile-safari

【解决方案1】：

我确实注意到您的标签没有引用清单。

<html manifest="cache.manifest">

此外，您需要确保清单文件使用“text/cache-manifest”mime 类型。

还要确保清单具有 UTF-8 编码，而不是浏览器难以理解的某种编码。

我还建议您在 Chrome 中加载该网站。如果您在 Chrome 中查看开发者日志，Chrome 会编写非常有用的错误消息，引导您找到问题所在。

【讨论】：

【解决方案2】：

我确实注意到您的标签没有引用清单。

<html manifest="cache.manifest">

此外，您需要确保清单文件使用“text/cache-manifest”mime 类型。

【讨论】：

【解决方案3】：

我也遇到过类似的问题：

尝试在清单文件中引用绝对路径。这对我有用，而且我也在使用子域。

同时在 Safari 中启用您的开发者控制台并添加以下 JS

function logEvent(event) {
  console.log(event.type);
}
window.applicationCache.addEventListener('checking', logEvent, false);
window.applicationCache.addEventListener('noupdate', logEvent, false);
window.applicationCache.addEventListener('downloading', logEvent, false);
window.applicationCache.addEventListener('cached', logEvent, false);
window.applicationCache.addEventListener('updateready', logEvent, false);
window.applicationCache.addEventListener('obsolete', logEvent, false);
window.applicationCache.addEventListener('error', logEvent, false);

这样，您可以在浏览器中检查您的缓存清单发生了什么，并了解是否发生错误。

【讨论】：