在iPhone上安装Web应用到主屏幕？

Question

如何让我的Web应用程序可以被安装为用户主屏幕上的图标？数据是否会被本地缓存，以便在用户不在3G网络范围内时仍可以运行Web应用程序？

我已经快速搜索了一下谷歌，但我的搜索术语还不够。我注意到Google Buzz允许我进行本地安装，并且想知道创建Web应用程序的过程是什么，并且它们是否会获得特殊处理（完全缓存/离线运行）。

- Stefan Kendall

Answer 1

使用名为apple-mobile-web-app-capable的标签来实现此行为。

详细信息（以及其他对iPhone网页应用有用的标签）请参见：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

<meta name="apple-mobile-web-app-capable" content="yes">

您可以指定一个图标URL来设置应用的漂亮图标：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

<link rel="apple-touch-icon" href="/custom_icon.png" />

还可以设置启动画面：

<link rel="apple-touch-startup-image" href="/startup.png" />

数据可以本地缓存。您可以使用各种HTML5 JavaScript APIs和缓存清单来存储数据。

- ceejayoz

---

所有的CSS/JS都被缓存了吗，这样在离线时就可以在本地运行了吗？ - Stefan Kendall

Answer 2

请参考ceejayoz的答案，了解iPhone特定的内容（图标、全屏模式），但是为了将整个应用程序存储在本地并离线运行，您需要查看所谓的“缓存清单”。该文件链接到您页面上的开放html标签中，列出应用程序需要在本地存储的每个资源。

此外，为了存储用户数据（如果需要），您需要研究客户端数据库。我对此知之甚少，因此不会尝试解释它。

Apple在这里有一个不错的页面：https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1，介绍了缓存清单和本地数据库存储。这应该有助于解释您需要做什么才能使应用程序离线运行。

- Cocoatype

Answer 3

这是另一个与您正在尝试做的事情相关的示例，可能会有所帮助：http://mrgan.tumblr.com/post/257187093/pie-guy

- Eric Schweichler