Question

要明确的是，Web应用程序正在缓存，并且在Mobile Safari中可以正常脱机工作。

问题在于它被添加到iPhone 4s和iPad 2的主屏幕上，两者都运行iOS 6.0.1。它不能脱机工作，并且连接到互联网时出现网络错误，即“无法打开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中的内容相同。
已添加：

NETWORK： *

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

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

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

Answer 1

我已经解决了这个问题。我建议在iOS 6中使用以下主屏幕Web应用程序。

出于测试目的，使用Web Inspector和一个不错的JS脚本（如Jonathan Stark）来了解应用程序何时缓存在Mobile Safari中：

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

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

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

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

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

Answer 2

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

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

Answer 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);

Answer 4

我遇到了两个问题。我正在使用ASP.NET MVC / Razor生成我的缓存清单，因为我希望能够轻松地从虚拟应用程序托管该站点并仍然保持路径排列。内容类型未在缓存清单上正确设置，因此Internet Explorer和Safari（iOS）无法识别它（即使PC和Android上的Chrome也是如此）。

一旦我解决了这个问题，当我尝试使用iOS Safari访问我的Azure托管应用时，它仍然无效。当我尝试使用Internet Explorer访问时，我看到它没有正确的mime类型用于我所拥有的字体。

所以要警告：绝对确定清单的mime类型，以及清单所依赖的所有文件。

HTML5网络应用程序在iOS中添加到主屏幕时不缓存

4 个答案: