在 iOS 中添加到主屏幕时 HTML5 Web 应用程序不缓存答案

【问题标题】：HTML5 web app not caching when added to home screen in iOS在 iOS 中添加到主屏幕时 HTML5 Web 应用程序不缓存
【发布时间】：2012-10-29 10:39:23
【问题描述】：

需要明确的是，网络应用正在缓存，并且在 Mobile Safari 中离线运行良好。

问题是当它被添加到运行 iOS 6.0.1 的 iPhone 4s 和 iPad 2 的主屏幕时。它无法离线工作，并在连接到互联网时出现网络错误，即“无法打开 MYWEBAPP。MYWEBAPP 无法打开，因为它没有连接到互联网”

我已经调试了几个小时，但似乎找不到解决方案。我在控制台中没有收到任何错误，我正在运行 Jonathan Stark 的 debugging code

我已经在桌面版 Safari、Chrome 和 Firefox 的在线/离线开发者工具中测试了该应用程序。以及带有 Safari 中设备的 Web Inspector。结果在 iPhone 或 iPad 上都是一样的。它们都将缓存 Web 应用程序并在 Mobile Safari 中运行，但在添加到主屏幕时不会。离线或在线都没有错误。

据我所知，我正在使用最佳做法：

添加 HTML 标头：<html manifest="photo.appcache">

我还尝试过为清单文件使用不同的名称，包括：cache.manifest 和 offline.manifest，因为我读到它会有所不同，但在我的测试中，只要扩展名是 .manifest 或 .appcache，并在 .htaccess 文件中适当地提供。
添加了正确的 MIME 类型：AddType text/cache-manifest appcache manifest

我也试过：AddType text/cache.manifest manifest, AddType text/cache.manifest .manifest manifest, AddType text/cache-manifest .manifest

我认为这不起作用：AddType text/cache.manifest 但我不记得了。在大多数情况下，这并不重要，我坚持：

AddType text/cache-manifest appcache manifest

HTML5 Mobile Boilerplate 中的内容。
添加：

网络： *

到 appcache 文件。我相信这允许下载所有内容以及使所有链接正常工作。

我已尝试删除此行：<meta name="apple-mobile-web-app-capable" content="yes"> 因为我在这里阅读了 SO 解决了与我类似的问题，但我可以确认它在我的测试中不起作用。当按下主屏幕图标时删除此行或将内容设置为“否”将重定向到 Mobile Safari 而不是全屏打开。

我几乎已将其范围缩小到它是 iOS 6 中的一个错误（我实际上使用的是 iOS 6.0.1），因为我知道现在已经为浏览器中的 Web 应用程序和那些添加到主屏幕。我在这里发布这个问题，看看是否有其他开发者遇到过同样的问题。

【问题讨论】：

标签： ios web-applications mobile-safari manifest offline-caching

【解决方案1】：

我已经解决了这个问题。对于 iOS 6 中的主屏幕 Web 应用，我推荐以下内容。

出于测试目的，请使用 Web Inspector 和 Jonathan Stark 之类的优秀 JS 脚本来了解应用何时缓存到 Mobile Safari 中：

http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

成功缓存后，将应用添加到主屏幕并保持打开状态，以便单独缓存主屏幕版本。它必须完全缓存才能离线工作。

由于我的应用程序缓存是 22mb 的数据，并且数据的缓存对于 Web 应用程序是单独的，所以我遇到的问题是没有让主屏幕应用程序打开足够长的时间来缓存。

就用户体验而言，这很糟糕，但数据是分开的也很好。我可以确认这一点，因为如果您从 Safari 中删除网站数据，主屏幕网络应用程序仍然可以运行。

据我所知，没有办法调试为主屏幕 Web 应用程序缓存的数据或数据的存储位置。

【讨论】：

见鬼，这个脚本是解决方案，我会在下面添加它作为答案。
链接已失效。
脚本粘贴在@Philip 答案中。我将使用 Gist 更新链接。然而，我无法控制 Jonathan Starks 的博客。可以用谷歌搜索看看能不能找到？

【解决方案2】：

上面的答案非常有帮助。 @aul 说他不知道调试主屏幕网络应用程序的方法，但我找到了方法。

将您的 iPad 或 iPhone 连接到您的计算机，然后在 Safari 中转到“开发”> 并选择您的设备。您的主屏幕应用程序必须打开才能显示在下拉菜单中。访问应用程序后，您可以打开错误控制台并观看 Jonathan Stark's script 开始工作。下载清单后，您将能够在离线模式下使用该应用程序。

【讨论】：

【解决方案3】：

这个脚本让生活更轻松！感谢@Paul！

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);

setInterval(function(){cache.update()}, 10000);

【讨论】：

【解决方案4】：

我有一个两部分的问题。我正在使用 ASP.NET MVC/Razor 生成我的缓存清单，因为我希望能够轻松地将站点托管在虚拟应用程序之外并且仍然保持路径对齐。缓存清单上的内容类型未正确设置，因此 Internet Explorer 和 Safari (iOS) 无法识别它（即使 PC 和 Android 上的 Chrome 可以）。

解决了这个问题后，当我尝试使用 iOS Safari 访问我的 Azure 托管应用程序时，它仍然无法正常工作。当我尝试使用 Internet Explorer 访问时，我发现它没有正确的 mime 类型来匹配我使用的字体。

所以警告一句：不仅要绝对确定清单的 MIME 类型，还要确定清单所依赖的所有文件的 MIME 类型。

【讨论】：

我还使用 ASP 生成缓存清单，但在服务器端。如何检查 MIME 类型？
@Tatyana 打开浏览器的开发工具 (F12) 并查看网络选项卡。