在iPhone上将webapp安装到主屏幕上？

Question

如何允许将我的webapp作为图标安装在用户的主屏幕上？数据是否在本地缓存,以便在用户不在3G时运行webapp？

我做了一个快速谷歌,但我的搜索条件缺乏.我注意到Google Buzz允许我在本地安装,我想知道创建Web应用程序的过程是什么,以及他们是否得到特殊处理(完全缓存/离线运行).

Answer 1

此行为是使用meta标题标记完成的apple-mobile-web-app-capable.

详细信息(以及meta对iPhone网络应用程序有用的其他标签):https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

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

要为您的应用设置一个漂亮的图标,您可以为您的图标指定一个网址:

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 API和缓存清单来存储数据.

Answer 2

请参阅ceejayoz对各种iPhone特定内容(图标,全屏模式)的回答,但为了在本地存储整个应用程序(并离线运行),您需要查看所谓的"缓存清单".此文件链接到页面上的开始html标记,列出了应用程序需要在本地存储的每个资源.

此外,为了存储用户数据,如果需要,您需要查看客户端数据库.我不太了解这一点,所以我不会试图解释它.:P

Apple在这里有一个不错的页面:https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1

讨论缓存清单和本地数据库存储.这应该有助于解释您需要做什么才能使您的应用程序脱机运行.

Answer 3

这是你想要做的另一个例子,可能会有所帮助:http://mrgan.tumblr.com/post/257187093/pie-guy