iOS APP添加桌面快捷方式

前言

最近在地图项目中测试了一个iOS地图添加到桌面快捷方式的功能，实现的功能是这样的：你可以把经常搜索或导航的历史记录或收藏点如你的家以快捷方式添加到桌面，这样无论在哪儿，你只需要在手机桌面直接点击家的快捷方式图标，就可以直接求到回家的路并导航回家。而不需要每次打开搜狗地图APP输入家的地址再去导航。 在其他APP中也有不少类似的应用，如支付宝的小程序、手机浏览器中经常访问的网页等都可以以快捷方式添加到桌面，为了更好地完成该类功能的测试，小编了解了开发实现并进行了整理，在此和大家分享，希望各位能有所收获。

1. 桌面快捷方式功能介绍

如前言所述，将APP添加到桌面快捷方式其实就是将应用的某一个页面或某一个功能以快捷方式形式添加到桌面，用户点击桌面图标，可以唤起应用并打开对应页面或功能。 由于iOS目前还没有这个功能的开放API，通常都是借助于Safari浏览器来实现，在Safari浏览器中有一个子功能-添加到主屏幕，通过这个入口可以实现这个功能。

2. 桌面快捷方式功能实现

通过分析可知，整个功能实现分为两部分：一是把APP中的某个页面或功能添加到桌面快捷方式，二是点击桌面快捷方式图标唤起APP。下面将分别介绍。 2.1 APP添加到桌面快捷方式 实现方案为：APP内部执行添加到桌面操作时调起Safari，让Safari访问一个指定页面，此时再利用Safari的“添加至主屏幕”功能，生成桌面快捷方式图标。 该部分的实现包括以下几个步骤： 1） APP端执行添加到桌面操作 如下图所示，点击我的家-添加快捷地点到桌面

2）客户端通过OpenUrl调起Safari，再二次跳转到data url 技术实现方案是首先通过调起Safari，然后跳到一个Data URI Scheme形式下的HTML页面，而添加到主屏幕的也是这个Data URI Scheme形式下的HTML页面。 OpenUrl调起Safari的实现为： [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"http:www.xxx.com"]]; 通过该方法即可调起Safari，让Safari访问附带的URL链接，在该功能实现中，URL链接指向一个Data URI Scheme形式下的HTML页面。如下图所示：

其中pre.html是实体页面，被编译为data url； index.html是入口文件，打开后二次跳转至pre.html对应的data url。 3） Safari中点添加到主屏幕，生成桌面快捷方式图标

点击添加到主屏幕，跳转页面可以看到data url格式的内容。添加到主屏幕，就是将编码好的网页内容和图标保存到桌面。 2.2 点击桌面快捷方式图标唤起APP 当点击桌面图标的时候，会先跳转到一个中间页面，然后执行JS文件跳转到App对应的功能。

在js文件中，通过window.navigator.standalone来判断当前页面是否全屏，如果非全屏，那么就显示一个引导页，如果是全屏，就打开一个链接。 至此，iOS APP添加到桌面快捷方式的功能就已经实现了。

3. 技术小科普

最后针对文中出现的几个知识点进行简单科普，以便更好地理解上述逻辑。 1）Data URI Scheme Data URI Scheme可以将数据嵌入到网页里面但无需任何额外的HTTP 请求。 假如你在网页里需要放一张图片A，通常方式为： <imgsrc="http://xxx.xx.xx.xxx/images/A.png"/> 这种实现方式为http URIscheme，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。 同样的效果使用 data URIscheme 可以写为 <imgsrc="data:image/png;base64,iVBO…" /> 在data URI scheme实现方式中，把图像文件进行base64编码直接存储在页面HTML文档中，节省了一个HTTP请求。网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数，因此data URI scheme不仅提高了网页优化效率，而且无需HTTP 请求可以实现在断网条件下正常资源加载。 2）Base64 编码 Base64是一种基于64个可打印字符来表示二进制数据的表示方法。常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，base64 编码和解码的工具见http://imgbase64.duoshitong.com/。 3） Data URI的格式规范 data:[<mimetype>][;charset=<charset>][;<encoding>],<encodeddata> data ：协议名称； [] ：可选项，数据类型（image/png、text/plain等） [;charset=] ：可选项，源文本的字符集编码方式 [;] ：数据编码方式（默认US-ASCII，BASE64两种） , ：编码后的数据 目前，Data URIscheme支持的类型有： data:, 文本数据 data:text/plain, 文本数据 data:text/html, HTML代码 data:text/html;base64, base64编码的HTML代码 data:text/css, CSS代码 data:text/css;base64, base64编码的CSS代码 data:text/javascript, Javascript代码 data:text/javascript;base64, base64编码的Javascript代码 data:image/gif;base64, base64编码的gif图片数据 data:image/png;base64, base64编码的png图片数据 data:image/jpeg;base64, base64编码的jpeg图片数据 data:image/x-icon;base64, base64编码的icon图片数据 4）设置web application样式 设置桌面图标 <linkrel="apple-touch-icon" sizes="167x167"href="touch-icon-ipad-retina.png"> 设置启动图 <linkrel="apple-touch-startup-image" href="/launch.png"> 设置快捷方式名称 <metaname="apple-mobile-web-app-title" content="AppTitle"> 设置Web应用运行时是否全屏 <metaname="apple-mobile-web-app-capable" content="yes"> 设置Web应用的导航栏样式 <metaname="apple-mobile-web-app-status-bar-style"content="black"> 关联到其他应用 <ahref="tel:1-408-555-5555">Call me</a>