前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS APP添加桌面快捷方式

iOS APP添加桌面快捷方式

作者头像
用户5521279
发布2019-06-03 15:08:31
7.3K3
发布2019-06-03 15:08:31
举报
文章被收录于专栏:搜狗测试

前言

最近在地图项目中测试了一个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>

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 搜狗测试 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档