配置web应用，使Safari执行应用像本地应用

今天本来想看javascript，因为昨天看javascript的时候，看到下面这句话

javascript的对象的最后一个属性添加逗号，会在IE和Opera中导致错误。

这让我想起前几天处理上传功能的时候，我们头和我说的，接着就想起了jira上面的任务，正好趁这个时间翻译下，下面是要翻译的地址

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3

配置Web应用

web应用程序从设计到外观以及行为和本地应用都很相似，例如，缩放来适应iOS设备的屏幕。你在iOS上的Safari来裁减你的web应用，来让用户把你的web应用像本地应用那样，添加到主屏幕，这样的设置是其他平台无法做到的。

举个例子，当用户添加你的web应用到iOS的主屏幕，你可以为你的应用指定一个图标，给Web Clip指定一个网页图标所描述的那样。 当你的web应用是从主屏幕开启的，你还可以在iOS的Safari上给用户更好的用户体验。可以更改状态栏外观和隐藏Safari的用户界面组建。当你加载你的web应用时这些可选设置是其他平台做不到的。

如何设置你的web应用在iOS上的效果，参考“web应用程序的视图设置”

给Web-Clip指定一个网页图标

---

iOS 附注：需要iOS 1.1.3或更好版本使用Web Clip，要使用 “apple-touch-icon-precomposed.png” 文件名，必须是iOS 2.0或更高版本（看来Apple公司早就预料了以后是web应用的天下，哈哈）支持多个不同设备分辨率的图标是在iOS 4.2和更高版本。

你可能希望用户能够添加你的web应用或网页链接到主屏幕。这些链接或者是用来展现图标，就叫Web Clips。按照下面简单的步骤就可以在iOS上为你的web应用或者网页指定一个用来展现的图标。

• 要为你的整个站点（站点的每一个页面）指定一个图标，在你的应用的本目录放一个格式为png，文件名叫“apple-touch-icon.png”或者“apple-touch-icon-precomposed.png”。如果你使用“apple-touch-icon-precomposed.png”作为文件名，iOS上的Safari不会为图标添加任何效果。（我猜是比如圆角，玻璃效果之类）

• 要为单独的页面或者替换网站某一个指定的图标，添加一个link元素到页面中，如下：

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

• 在上面的例子中，替换“custom_icon.png”为你的图标名，如果你不想在iOS的Safari的图标中添加任何效果，替换“apple-touch-icon”为“apple-touch-icon-precomposed”。

• 给不同的设备指定不同大小的图标，例如同时支持Phone和iPad设备，添加下面多个元素到页面

  <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

设备会使用最适合的尺寸来作为图标，如果没设置尺寸的属性，默认为57 x 57。

如果没有设备匹配尺寸大小，那么推荐的图标大小最小尺寸的图标会被使用。如果没有比推荐的图标大小更大的图标，最大的将被使用。如果多个图标都相匹配，则会使用带有“precomposed”关键字作为名称的图标。

如果元素中没有指定图标，将在网站根目录寻找图标名称“apple-touch-icon…”或者“apple-touch-icon-precomposed…”为前缀的，例如，如果设备的合适的图标尺寸是57 x 57，系统会根据下面的顺序来寻找图标

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

参考网站图标标准“自定义图标及图像创建标准”。

指定启动画面

---

iOS 附注：需要iOS 3.0或更好版本才能指定启动画面

在iOS中，类似与本地应用，可以指定你的web应用启动时的启动画面，尤其是当你的web应用处于离线状态会很有用。默认，使用的是最后一次使用web应用的截图。如果设置其他的启动画面，添加link元素到你的web页面，如下：

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

上面的例子，替换“startup.png”为你指定的启动画面的文件名，在iPhone和iPod touch上，图片的大小必须320 x 460像素，并且必须是纵向的。

隐藏Safari的用户界面组建

---

在iOS中，作为优化你的web应用的一部分，它使用独立的模式来让你的应用看起来更像本地应用，当你使用独立模式，Safari不是特地用来显示web内容，没有浏览器地址栏在屏幕的顶部或者是按钮在屏幕的下面，只有状态栏在屏幕顶部。阅读更改状态栏外观来了解如何最小化状态栏。

设置apple-mobile-web-app-capablemata标签为yes来开启独立模式，例如，下面的HTML使用独立模式显示网页内容。

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

你可以用“window.navigator.standalone”JavaScript属性来设置布尔值来让页面显示为独立模式。

更改状态栏外观

如果你的web应用显示在独立模式下，看起来更像本地应用，那么你可以最小化在iOS的顶部显示的状态栏。因此使用状态栏mata标签

除非你已经使用了隐藏Safari的用户界面组建中所说的独立模式，否则下面标签在页面中也没有效果。apple-mobile-web-app-status-bar-style，改变状态栏的外观取决于你的应用需要。例如，如果你想使用整个屏幕，设置状态栏的风格为黑色半透明。

例如，下面的HTML使你的状态栏为黑色背景半透明：

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