HTML5网络应用程序在iOS中添加到主屏幕时不缓存 [英] HTML5 web app not caching when added to home screen in iOS
问题描述
要明确的是，网络应用程序正在缓存并在Mobile Safari中正常工作。
问题在于它被添加到iPhone的主屏幕上4s和iPad 2都运行iOS 6.0.1。它不会脱机工作，并且连接到互联网会出现网络错误，即无法打开MYWEBAPP。由于未连接到互联网，因此无法打开MYWEBAPP
我已经调试了几个小时，似乎无法找到解决方案。我在控制台中没有收到任何错误，而且我正在运行Jonathan Stark的调试代码
我已经在桌面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-capablecontent =yes>
因为我在这里读到了解决类似我的问题，但我可以确认它不起作用我的测试。按主屏幕图标时删除此行或将内容设置为否将重定向到Mobile Safari而不是全屏打开。
我差点把它缩小到iOS 6中的一个错误（我实际上是在使用iOS 6.0.1） ，因为我知道现在已经为浏览器中的Web应用程序和添加到主屏幕的Web应用程序分离了数据。我在这里发布这个问题，看看是否有其他开发人员遇到过同样的问题。
我已经解决了这个问题。我建议在iOS 6中使用以下主屏幕Web应用程序。
出于测试目的，使用Web Inspector和一个很好的JS脚本，如Jonathan Stark，知道应用程序何时有已缓存在Mobile Safari中：
成功缓存后，将应用程序添加到主屏幕并保持打开状态，以便单独缓存主屏幕版本。它必须完全缓存才能脱机工作。
由于我的应用程序缓存是22mb的数据，并且Web应用程序的数据缓存是SEPARATE，我遇到的问题是没有让主屏幕应用程序打开足够长的时间缓存。
就用户体验而言，这是可怕的，但数据是分开的也很好。我可以确认一下，因为如果您从Safari删除网站数据，主屏幕网络应用程序仍然可以正常运行。
据我所知，没有办法调试为主屏幕Web应用程序缓存的数据，或者存储它的位置。
To be clear, the web app IS caching and is working fine offline in Mobile Safari.
The problem is when it is added to the home screen on an iPhone 4s and iPad 2, both running iOS 6.0.1. It won't work offline and gives a network error to connect to the internet i.e. "Cannot open MYWEBAPP. MYWEBAPP could not be opened because it is not connected to the internet"
I've been debugging this for several hours and can't seem to find a solution. I'm not receiving any errors in the console and I'm running Jonathan Stark's debugging code
I've tested the app in desktop Safari, Chrome and Firefox's developer tools both Online/Offline. As well as Web Inspector with the devices in Safari. The result is the same on either iPhone or iPad. They will both cache the web app and will work in Mobile Safari, but not when added to the home screen. No errors either offline or online.
As far as I know, I'm using best practices:
Added HTML header:
<html manifest="photo.appcache">I've also experimented with using different names for the manifest file including: cache.manifest and offline.manifest as I read that it makes a difference, but in my testing it does not matter what the name is as long as the extensions are .manifest or .appcache and is served appropriately in the .htaccess file.
Added correct MIME types:
AddType text/cache-manifest appcache manifestI've also tried:
AddType text/cache.manifest manifest,AddType text/cache.manifest .manifest manifest,AddType text/cache-manifest .manifestI don't believe this worked:
AddType text/cache.manifestbut I don't remember. For the most part it didn't matter and I stuck with:AddType text/cache-manifest appcache manifest
as that what was in the HTML5 Mobile Boilerplate.
Added:
NETWORK: *
to the appcache file. I believe this allows everything to be downloaded as well as making all links work.
- I've tried removing this line:
<meta name="apple-mobile-web-app-capable" content="yes">because I read here on SO that is solved a problem similar to mine, but I can confirm that it does not work in my testing. Removing this line or setting the content to "no" when pressing on the home screen icon will redirect to Mobile Safari and not open fullscreen.
I've pretty much narrowed it down to it being a bug in iOS 6 (I'm actually using iOS 6.0.1), because I know that data has now been separated for web apps in the browser and those added to the home screen. I'm posting this issue here to see if any other developers have encountered the same issue.
I've solved this issue. I recommend the following for home screen web apps in iOS 6.
For testing purposes, use the Web Inspector and a nice JS script like Jonathan Stark's to know when the app has been cached in Mobile Safari:
After it has been successfully cached, add the app to your home screen and leave it open in order for it to cache the home screen version separately. It has to fully cache in order for it to work offline.
Since my app cache is 22mb of data and the caching of the data is SEPARATE for the web app, the problem I had was not leaving the home screen app open long enough to cache.
This is terrible as far as user experience goes, but also good that the data is separate. I can confirm this because if you delete the website data from Safari, the home screen web app will still function.
As far as I know, there isn't a way to debug the data cached for the home screen web app, or where it is stored.
这篇关于HTML5网络应用程序在iOS中添加到主屏幕时不缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
