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

要清楚地知道，该Web应用程序缓存并且在移动Safari中正常工作。在iOS中添加到主屏幕时，HTML5网络应用程序不缓存

问题是当它被添加到iPhone 4s和iPad 2上的主屏幕上时，它们都运行iOS 6.0.1。它不会脱机工作，并提供网络错误连接到互联网，即“无法打开MYWEBAPP。MYWEBAPP无法打开，因为它没有连接到互联网”

我一直在调试这几个小时，似乎无法找到解决方案。我没有收到控制台中的任何错误，我正在运行Jonathan Stark的debugging code

我已经在桌面Safari，Chrome和Firefox的开发人员工具中在线/离线测试了该应用程序。以及使用Safari中的设备的Web Inspector。结果在iPhone或iPad上都是一样的。他们都会缓存网络应用程序，并且可以在Mobile Safari中使用，但在添加到主屏幕时不会。无论是脱机还是在线都无错误。

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

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

我也尝试使用不同的名称清单文件包括：缓存。 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文本/缓存清单应用程序缓存清单

为什么在HTML5移动样板。
补充：

NETWORK： *

到应用程序缓存文件。我相信这可以让所有的下载以及所有的链接工作。

我试图消除这一行：<meta name="apple-mobile-web-app-capable" content="yes"> 因为我读到这里上，这样就解决了一个问题，与我相似，但我可以肯定，它不会在我的测试工作。按主屏幕图标时，删除此行或将内容设置为“否”将重定向到Mobile Safari，并且不会全屏打开。

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

来源

2012-11-09 Paul

我已经解决了这个问题。我建议在IOS 6

主屏幕上的Web应用程序为了测试以下，使用Web检查和一个不错的JS脚本像乔纳森·斯塔克的，知道什么时候该应用在移动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应用程序仍然可以运行。

据我所知，没有调试缓存在主屏幕上的Web应用程序中的数据的方式，或者其存储在何处。

来源

2012-11-09 18:43:55 Paul

地狱是的，这个脚本是解决方案，我会在下面添加它作为答案。 – Philip

链接现已停止。 – Joshua

脚本粘贴在@Philip答案中。我会用Gist更新链接。然而，我无法控制Jonathan Starks博客。也许做一个谷歌搜索，看看你能找到它吗？ – Paul

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

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

来源

2013-01-23 22:15:40 ReLeaf

这个脚本让生活更轻松！感谢@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);

来源

2013-08-20 18:32:38 Philip

我有两个部分的问题。我使用ASP.NET MVC/Razor生成了我的缓存清单，因为我希望能够轻松地将该网站托管在虚拟应用程序之外，并且仍然有路径排列。缓存清单中的内容类型没有正确设置，因此Internet Explorer和Safari（iOS）不认识它（即使PC和Android上的Chrome也会）。

一旦我解决了这个问题，它仍然没有，当我试图访问我的Azure的托管应用与iOS的Safari工作。当我尝试访问Internet Explorer时，我看到它没有正确的MIME类型，因为我使用的是字体。

所以提醒一句：绝对确保MIME类型不仅清单的，也是所有文件清单依赖。

来源

2015-05-08 18:36:29 mason

我也用ASP生成缓存清单，但是在服务器端。我该如何检查MIME类型？ – Tatyana

@Tatyana打开浏览器的开发工具（F12）并查看网络选项卡。 – mason

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

回答

相关问题