在 iOS 中添加到主屏幕时 HTML5 Web 应用程序不缓存 [英] HTML5 web app not caching when added to home screen in iOS
问题描述
需要明确的是，Web 应用程序正在缓存并且在 Mobile Safari 中离线工作正常.
To be clear, the web app IS caching and is working fine offline in Mobile Safari.
问题是当它被添加到运行 iOS 6.0.1 的 iPhone 4s 和 iPad 2 的主屏幕时.它无法脱机工作，并在连接到互联网时出现网络错误，即无法打开 MYWEBAPP.无法打开 MYWEBAPP，因为它没有连接到互联网"
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"
我已经调试了几个小时，但似乎找不到解决方案.我没有在控制台中收到任何错误，我正在运行 Jonathan Stark 的 调试代码
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
我已经在桌面版 Safari、Chrome 和 Firefox 的在线/离线开发人员工具中测试了该应用程序.以及带有 Safari 设备的 Web Inspector.结果在 iPhone 或 iPad 上都是一样的.它们都将缓存 Web 应用程序并在 Mobile Safari 中工作，但在添加到主屏幕时不会.离线或在线都没有错误.
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:
添加了 HTML 标头:
我还尝试为清单文件使用不同的名称，包括:cache.manifest 和 offline.manifest，因为我读到它会有所不同，但在我的测试中，名称是什么并不重要，只要扩展名是 .manifest 或 .appcache，并在 .htaccess 文件中适当提供.
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.
添加了正确的 MIME 类型:AddType text/cache-manifest appcache manifest
Added correct MIME types: 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 但我不记得了.在大多数情况下，这无关紧要，我坚持:
I don't believe this worked: AddType text/cache.manifest but I don't remember. For the most part it didn't matter and I stuck with:
AddType text/cache-manifest appcache manifest
AddType text/cache-manifest appcache manifest
这就是 HTML5 移动样板中的内容.
as that what was in the HTML5 Mobile Boilerplate.
添加:
网络:*
到应用缓存文件.我相信这允许下载所有内容并使所有链接正常工作.
to the appcache file. I believe this allows everything to be downloaded as well as making all links work.
- 我尝试删除这一行:
<meta name="apple-mobile-web-app-capable" content="yes">因为我在这里读到 SO 这解决了一个类似于我的问题，但我可以确认它在我的测试中不起作用.在按下主屏幕图标时删除此行或将内容设置为否"将重定向到 Mobile Safari 而不会全屏打开.
- 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.
我已经将其范围缩小到它是 iOS 6 中的一个错误(我实际上使用的是 iOS 6.0.1)，因为我知道现在浏览器中的网络应用程序和添加到主屏幕.我在这里发布这个问题，看看是否有其他开发者遇到了同样的问题.
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.
推荐答案
我已经解决了这个问题.对于 iOS 6 中的主屏幕网络应用，我推荐以下内容.
I've solved this issue. I recommend the following for home screen web apps in iOS 6.
出于测试目的，请使用 Web Inspector 和一个不错的 JS 脚本(如 Jonathan Stark 的脚本)来了解应用程序何时已缓存在 Mobile Safari 中:
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.
由于我的应用程序缓存是 22mb 的数据，并且数据的缓存对于网络应用程序是单独的，所以我遇到的问题是主屏幕应用程序打开的时间不够长以进行缓存.
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.
就用户体验而言，这很糟糕，但数据是分开的也很好.我可以确认这一点，因为如果您从 Safari 中删除网站数据，主屏幕网络应用程序仍将运行.
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.
这篇关于在 iOS 中添加到主屏幕时 HTML5 Web 应用程序不缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
