iOS添加快捷方式到桌面

iOS添加快捷方式到桌面#

涉及:OpenUrl、iOS shceme、Data URI Scheme、JS、Socket#
功能:将应用的某一个页面或某一个功能以快捷方式形式添加到桌面,用户点击桌面图标,可以唤起应用并打开对应页面或功能。

原创文章,欢迎转载分享 微博@刘东寰


背景

用户在使用如微博、淘宝、贴吧、百度地图时,有些页面打开频率非常高,甚至某个应用只为了这几个单一的功能,这个时候,可以考虑将对应的功能页面以快捷方式添加到桌面上。


实现这个功能的基础

因为没有找到或没有这个功能的开放API,因此只能借助Safari,在Safari中,有一个功能叫:添加到主屏幕,而我们将使用这个入口去实现这个功能。

Safari中添加到主屏幕,就是把当前页面的url以图标的形式添加到桌面,点击该图标,还是打开Safari并打开对应的url,和我们想要的效果不一样,继续看下去。


iOS之OpenUrl

OpenUrl(开放链接)

例如:

[[UIApplication sharedApplication] openURL:[NSURLURLWithString:@"tel://xxx"]];

在iOS中,如果我们要在应用里唤起拨号应用,会使用这么一种方式,"tel://" 就是拨号应用在程序里注册的scheme,所有应用都可以在程序里注册scheme,这种scheme在整个手机里是通用的,第三方的分享也是依赖这种方式通过openURL:scheme的方式唤起自己的应用。

那么如何注册自己应用的scheme?网上关于这方面非常多,就贴个链接吧here.

OpenUrl在这个功能的利用就是:

  1. 通过OpenUrl唤起Safari,让Safari访问一个指定页面。
  2. Safari保存到桌面的图标,在点击时通过OpenUrl唤起我们的应用。(你可以在Safari地址栏输入tel://xxx

Safari打开怎么样的页面?

通过OpenUrl,我们可以让应用打开Safari并访问一个页面。我们知道Safari添加到桌面是把当前的URL添加到桌面,那么,当我们点击图标的时候也是访问这个页面。而这个页面在第一次被打开的时候需要显示一些引导页之类的,而在桌面被打开的时候却需要调用一个scheme。这似乎不太可能,我们接着往下看。


JS

对JS不是太熟悉,以下方法来自网络

<script>
if (window.navigator.standalone == true)
{
    var lnk = document.getElementById("你的带scheme的<a>标签ID").click();
    //通过你所知道的方式打开一个scheme,上面这句话的链接标签如:<a href="tel://xxx">
}
else
{
    document.getElementById("msg").innerHTML='<div style="font-size:12px">
    可以插入引导页</div>';
    //这里你可以去加载你的引导页
}
</script>

你可以试试通过Safari保存一个页面到桌面,再打开这个页面,你会发现,前者是非全屏状态,而通过快捷方式打开的Safari是全屏的。这正是一个突破口。

if (window.navigator.standalone == true)

判断当前页面是否全屏,如果非全屏,那么我们显示引导页,如果是全屏,我们就打开一个链接。到这里,上一个问题就被解决了。


已经可以实现这个功能了

现在你可以在服务器部署一个网页实现这个功能了。但是,还是有缺点的,每次点击快捷方式我们都需要访问这个页面,如果网络状态不好,那么是很大的延时,(比如xx贴吧目前的状况)。

进一步优化之利用Data URI Scheme

我们希望这个页面不依赖网络。在这个过程中试验了多种方案,这里只贴我认为最妥的一种。

做过前端的小伙伴可能说到这就明白了,Data URI Scheme(DATA-URI 是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI.)比如网页里需要放一张图片,这张图片会有一个地址,而图片的获取是需要访问网络的。但是通过DataURI,我们可以把图片进行base64编码直接存储在页面中。

![](http://xxxx/xx.png)
->
![](http://upload-images.jianshu.io/upload_images/1971004-4e4b821f981fd216.png)

这里,我们就要通过这种方式,把我们的网页存储在地址栏,首先,我们将做好的页面(含引导页和跳转scheme)通过base64编码成DataURIScheme,接着,我们放入这样一个新页面的<meta>标签。这个新页面的作用就是作为一个中间物,所以其他可以不写。

<meta http-equiv="refresh" content="0;URL= ‘your datauri’>

这个新页面你需要部署到服务器,接着应用就打开这个页面,这个时候,页面会自动刷新一次,你会发现,你编码过的网页就出现在了地址栏,是不是很神奇。然后你把这个页面添加快捷方式到桌面。断开网络,再试试打开这个快捷方式吧。


该项目的Demo: iOS添加快捷方式到桌面

微博:@刘东寰

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,585评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,283评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,760评论 0 324
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,461评论 1 266
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,280评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,268评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,656评论 3 385
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,322评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,629评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,691评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,445评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,299评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,694评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,982评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,244评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,642评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,829评论 2 335

推荐阅读更多精彩内容