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，系统将按如下顺序搜索文件名：

1. apple-touch-icon-80x80.png
2. 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自带的屏幕录制功能，因此顶部状态栏背景被占用，实际体验启动图是全屏的。