Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一样

现在很多开发者的Web应用程序的设计样式和交互类似本机应用程序，例如，它的缩放比例适合iOS上的整个屏幕。当用户将其添加到主屏幕时，您可以通过使其看起来像本机应用程序一样，在iOS上为您的Web应用程序定制Safari。您可以使用其他平台忽略的iOS设置来执行此操作。

例如，您可以为添加到iOS主屏幕时用于表示Web应用程序的图标指定图标，如指定Web Clip的网页图标所述。当您的Web应用程序从主屏幕启动时，您还可以最小化iOS用户界面上的Safari，如更改状态栏外观和隐藏Safari用户界面组件（搜索栏及工具栏）。这些都是可选设置，添加到您的网页内容时会被其他平台忽略。

阅读Web应用程序的“视口设置”，了解如何在iOS上设置Web应用程序的视口。

指定Web应用程序的网页图标

您可能希望用户能够将您的Web应用程序或网页链接添加到ios设备主屏幕。这些由图标表示的链接称为Web剪辑。遵循这些简单的步骤来指定一个图标来表示您的iOS应用程序或网页。

要为整个网站（网站上的每个页面）指定一个图标，请将一个图标文件以PNG格式放置在名为root的文档文件夹 apple-touch-icon.png
要为单个网页指定一个图标或者将网站图标替换为网页特定的图标，请向该网页添加一个链接元素，如下所示：

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

在上面的例子中，custom_icon.png用你的图标文件名替换。
要为不同的设备分辨率指定多个图标（例如，同时支持iPhone和iPad设备），请sizes按以下方式为每个链接元素添加一个属性：

<link rel =“apple-touch-icon”href =“touch-icon-iphone.png”>

<link rel =“apple-touch-icon”sizes =“152x152”href =“touch-icon-ipad.png”>

<link rel =“apple-touch-icon”sizes =“180x180”href =“touch-icon-iphone-retina.png”>

<link rel =“apple-touch-icon”sizes =“167x167”href =“touch-icon-ipad-retina.png”>

使用最适合设备的图标。有关当前图标大小和建议，请参阅iOS人机界面指南的“图形”一章。
如果没有与设备的建议尺寸相匹配的图标，则会使用大于推荐尺寸的最小图标。如果没有大于推荐尺寸的图标，则使用最大的图标。

如果没有使用链接元素指定图标，则会在网站根目录中搜索带有apple-touch-icon...前缀的图标。例如，如果设备的适当图标大小为58 x 58，系统将按以下顺序搜索文件名：

apple-touch-icon-80x80.png
apple-touch-icon.png

注意： iOS 7上的Safari不会为图标添加效果。老版本的Safari不会为使用-precomposed.png后缀命名的图标文件添加效果。有关详细信息，请参阅第一步：在iTunes Connect中识别您的应用程序。

指定启动屏幕图像

在iOS上，与原生应用程序类似，您可以指定在Web应用程序启动时显示的启动屏幕图像。当您的Web应用程序处于脱机状态时，这非常有用。默认情况下，使用上次启动时的Web应用程序屏幕截图。要设置另一个启动图像，请在网页中添加一个链接元素，如下所示：

<link rel =“apple-touch-startup-image”href =“/ launch.png”>

在上面的例子中，launch.png用你的启动屏幕文件名替换。有关当前的启动屏幕大小和建议，请参阅iOS人机界面指南的“图形”一章。

添加启动图标标题

在iOS上，您可以为启动图标指定一个Web应用程序标题。默认情况下，使用<title>标签。要设置不同的标题，请在网页中添加元标记，如下所示：

<meta name =“apple-mobile-web-app-title”content =“AppTitle”>

在上面的例子中，替换AppTitle你的标题。

隐藏Safari用户界面组件

在iOS上，作为优化您的Web应用程序的一部分，让它使用独立模式更像本地应用程序。当您使用此独立模式时，Safari不会用于显示Web内容 - 具体来说，屏幕顶部没有浏览器URL文本字段，或者屏幕底部没有按钮栏。只有一个状态栏出现在屏幕的顶部。阅读更改状态栏外观以了解如何最小化状态栏。

将apple-mobile-web-app-capable元标记设置yes为打开独立模式。例如，以下HTML将使用独立模式显示Web内容。

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

您可以使用window.navigator.standalone只读布尔JavaScript属性确定网页是否以独立模式显示。有关独立模式的更多信息，请参阅apple-mobile-web-app-capable。

更改状态栏的外观

如果您的Web应用程序以独立模式显示，如本机应用程序，则可以最小化iOS上屏幕顶部显示的状态栏。这样做使用状态栏式元标记。

除非您首先指定了隐藏Safari用户界面组件中所述的独立模式，否则此元标记将不起作用。然后使用状态栏样式meta标签apple-mobile-web-app-status-bar-style来根据您的应用程序需要更改状态栏的外观。例如，如果要使用整个屏幕，请将状态栏样式设置为半透明黑色。

例如，下面的HTML将状态栏的背景颜色设置为黑色：

<meta name =“apple-mobile-web-app-status-bar-style”content =“black”>

有关状态栏外观的更多信息，请参阅iOS人机界面指南的“UI栏”一章。

链接到其他原生应用程序

您的Web应用程序可以通过创建具有特殊URL的链接来链接到其他内置的iOS应用程序。可用的功能包括拨打电话号码，发送短信或iMessage，并在其本机应用程序（如果已安装）中打开YouTube视频。例如，要链接到电话号码，请按以下格式构造一个锚点元素：

<a href="tel:1-408-555-5555">给我打电话</a>

有关这些功能的完整视图，请参阅Apple URL Scheme Reference。

这是我在项目index.html上添加的代码：

<!-- Specifying a Webpage Icon for Web Clip for Safari -->

<link rel="apple-touch-icon" href="assets/imgs/logo.png">

<!-- Specifying a Launch Screen Image for Safari -->

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

<!-- Hiding Safari User Interface Components -->

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

<!-- Changing the Status Bar Appearance -->

<meta name="apple-mobile-web-app-status-bar-style" content="black">

实际体验如下图所示：

可以看到用户添加到主屏幕后，有了自定义的图标及启动图，打开webapp后也不会有safari的地址栏和工具栏，体验跟原生一样。
因为我使用iphone自带的屏幕录制功能，所以顶部状态栏背景被占用，实际体验启动图是全屏的。