js在微信、微博、QQ、Safari唤起App的解决方案

125

背景

最近在做微信、QQ、微博中使用js唤起App,之前也做过类似的功能,不过比较粗糙,考虑的情况不太全,而且那已经是很久之前的事情了,很多技术都已过时,现在有体验更好,功能更加完善的唤起技术,之前的很多的方案,到了现在都已是不太必要了,现在通过这篇文章分享给大家一个全面的、最新的唤起方案,希望对大家有帮忙。

最终实现的效果

用户点击H5页面的打开App或者下载按钮(这个按钮可能在一个下载入口页、各种分享页面的吸顶或吸底的banner),如果用户已经安装了App,则根据业务跳转到相应的Native页面;如果用户没有安装该应用,则跳到AppStore或者应用市场去下载我们的App。

应用流程

clipboard.png

首先所有的下载/唤起入口都是一个直接跳转,应该是这样:

<a href="https://applink-party.mtime.cn/mtlf">下载</a>

或者这样:

window.location.href = 'https://applink-party.mtime.cn/mtlf'

所有的业务判断都是mtlf这个页面里面来做,这样有两个好处:

  • 多业务共用代码。在一个团队中,每个人的业务都可能有一个banner下载,没有比location到一个url更简单的调用方式了
  • 能够利用universal link

简单说下universal link

universal link的优势

在iOS9之前,唤起方式和现在安卓是一个的,都是使用scheme进行唤起,这种方式有个小问题,每次唤起,都会给个提示:是否打开xx应用,这样从体验上来讲,又让用户多一步操作。universal link会直接跳转,不会在页面做停留,条件就是在我们项目的根目录,增一个apple-app-site-association.json文件,里面的内容大致是这样:

clipboard.png

然后iOS的App后台再配置一下,就可以实现直接唤起了!

universal link配置

在H5端怎么才算配置成功了呢?只要我们某一个url在浏览器打开(不管是cdn地址,还是路由转发),看到json文件的内容,H5这边就算配置成功。然后把这个地址,给iOS老司机,和他们一说什么事,他们立刻就知道做什么,就这么简单!

微信、微博、QQ、Safari在各平台的唤起方案

唤起流程图

clipboard.png
经过长时间的实验,总结了这张在各种情况下,唤起成功/唤起失败的解决方案,我们接下来一个一个的说。

微信

微信是最重要的一种分享渠道,但是我们能够做的,却不多。之前,iOS下的微信支持universal link这种唤起方式,但是从2018年1月8日之后,微信把这个给屏蔽了!!!不管微信基于什么原因,把iOS下这种最便捷的唤起方式屏蔽,我们能做的只能是适应了。so,现在不管是iOS还是android,我们的处理方式是一样的:都是直接跳到应用宝。iOS的应用宝会引导找开AppStore,android的应用宝会直接打开App(前提是你已经下载)
:微信把itunes链接也屏蔽了,所以也没办法直接跳转AppStore,只能借助应用宝来搭这个桥。

微博

微博目前还支持universal link唤起,我们只需要考虑未下载的情况。

  • iOS下,微博是不支持打开应用宝的链接,所以我们需要引导用户使用Safari打开,像这样:

clipboard.png

  • android平台下,使用scheme这种方式是唤不起App的,但是有特例,同样是scheme,大人点评和网易云音乐就可以唤起,有空大家可以自己试试,所以我们可以推断出,安卓平台下的微博,也有类似微信一样的白名单,在白名单内的,就可以使用scheme唤起,就像微信之于京东,京东在微信里面就是通过scheme方式唤起的。

so,不管是iOS还是android,我们的方案是:直接引导用户使用本地浏览器打开

QQ

  • iOS平台下,QQ目前还支持universal link唤起,要是没有安装,QQ下也支持直接打开itunes链接,比较其他应用,QQ支持是最好的。
  • android平台下,QQ也支持scheme方式唤起,但是在一些老机型下,QQ会有一定的概率唤起失败,具体的现象是:第一次打开页面,唤起失败,再次打开,唤起成功。根据现象,我们可以推测出,在QQ的webview中,会对scheme的唤起方式做一些加载时间上的限制,经测试,大约在500ms,超过这个时间值,就会出现唤起失败的情况。为什么第二次打开,唤起成功的概率会大,是因为第一次加载时,已缓存了文件,第二次打开直接加载,这样时间在限制之内。

Safari

Safari这种情况比较简单,支持universal link,也支持直接打开itunes,so,如图处理就可以了。

踩坑

    • iOS9中,Safari不支持直接跳转itunes,so,这种情况需要做兼容处理,可以直接跳到应用宝
    • 之前看唤起是不是成功了,需要自己来计算时间,因为要是唤起成功了,setInterval的时间就会变慢,经我测试,已经用不到这种方法了,只需要使用document.hidden || document.webkitHidden就可以,兼容性还不错
    • 判断是不是Safari浏览器时,一般判断都是UA中有没有这个字符串,经测试发现,安卓的UA中,也包含Safari这个字符串(如下UA展示),所以需要加上操作系统的判断
    • 关于Scheme唤起,之前有很多方案,比如:使用iframe<a>标签点击window.location...经测试,只要使用a标签点击,这样兼容性最好,代码大约长这样:

    clipboard.png

    关于测试

    两个平台,这么多情况,要一个一个测试吗?当然要一个一个的验证,但是在开发期间,没有必要改一行,在手机上测试一下,这样效率太低了,尤其是像一样,选了一个安卓4.4的手机,绝对可以磨练你的耐心。为了提高效率,我把我常用到的UA分享给大家,这样在Chrome模拟器里配置一下,就可以本地调试了,常用UA如下:

    • iOS-微信

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN
    • iOS-QQ

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1
    • iOS-微博

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)
    • iOS-safari

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1
    • Android-微信

    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN
    • Android-QQ

    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080
    • Android-微博

    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8.0.2__android__android4.4.2)
    

    配置完成之后,就可以像我一样,在电脑上切换环境啦:

    clipboard.png

    源代码以及库文件使用,请参见:Github,用力点我

    扫码验证

    整个唤起流程,可以访问这个下载入口:https://party.mtime.cn/download
    也可以扫码:

    clipboard.png

    你可能感兴趣的

    55 条评论
    苍山暮色烟雨迟 · 2018年01月24日

    博主了解deeplink这类的原理吗,我看有个叫魔窗的sdk可以实现从微信直接唤醒到App指定页

    +1 回复

    0

    刚才看了下,他的官网上所有案例,目前在微信里也是唤不起来App。猜测之前可以,用的也是ul。微信唤起,要么像京东一样有合作,要么是自家产品,不会有黑科技

    会说话的鱼 作者 · 2018年01月26日
    羊羊羊 · 2018年01月23日

    小白求一份未压缩的demo源码,感谢感谢。

    回复

    0

    已添加Github,刷新一下即可看到

    会说话的鱼 作者 · 2018年01月23日
    pingan8787 · 2018年01月23日

    感谢

    回复

    陈陈陈大赛 · 2018年01月24日

    先收藏,回去在电脑上测试一下,不同的手机浏览器能不能唤起

    回复

    Jayden · 2018年01月24日

    在微信上没用的兄弟,只能要应用宝把你们的应用加白,我们就是

    回复

    0

    兄弟,是应用宝把应用加白,微信就能够唤起app到指定页面嘛?

    eddie · 2018年01月24日
    0

    兄弟,是应用宝把应用加白,微信就能够唤起app到指定页面嘛?

    羊羊羊 · 2018年02月01日
    简化 · 2018年01月24日

    很赞??

    回复

    devout · 2018年01月24日

    想要源码啊,大佬

    回复

    0

    GitHub源码地址在文章的最后

    会说话的鱼 作者 · 2018年01月24日
    陈天赐 · 2018年01月24日

    能把IDE的字体分享给我吗

    回复

    0

    字体是:Fira Code,GitHub:https://github.com/tonsky/Fir...,很有意思的字体,时不时有惊喜

    会说话的鱼 作者 · 2018年01月24日
    0

    @会说话的鱼 啊里卡多!

    陈天赐 · 2018年01月24日
    lz21 · 2018年01月24日

    Andriod ≠ Android

    回复

    0

    o.o 感谢指正啊,帮作者大大改了下错别字

    清蒸不是水煮 · 2018年01月24日
    殇心法西斯ls · 2018年01月24日

    厉害了

    回复

    巩大林 · 2018年01月24日

    联系求球 要零二五领把药六五就 实现微信跳转任意链接

    回复

    web_Yu · 2018年01月24日

    感谢

    回复

    eddie · 2018年01月24日

    目前其实仍然有不少app可以在微信中直接唤起到app的指定页面,怎么做到的也耐人寻味,是不是鹅厂真的是有传说中的白名单。

    回复

    1

    有白名单的!

    华尔街_地摊 · 2018年01月24日
    0

    大佬,知道怎样才能加入那个白名单吗?

    eddie · 2018年01月24日
    0

    搞好关系呗,被腾讯投资,或者给钱

    华尔街_地摊 · 2018年01月24日
    华尔街_地摊 · 2018年01月24日

    不会用额,
    <script>

    let config: IAppLink = {
        // 和app协定的scheme
        schema: 'mtlf://scheme?p=home',
        // iOS下的App在appstore的地址
        appstore: '//itunes.apple.com/cn/app/%E4%BE%83%E4%BE%83%E7%8C%A9/id1267259289?mt=8',
        // 应用宝的地址
        yyb: '//a.app.qq.com/o/simple.jsp?pkgname=com.mtime.lookface&fromcase=40002'
    }
    let applink = new AppLink(config)
    applink.open()

    </script>
    直接这样用么

    回复

    0

    ts这么用,js的话,把config的接口约束去掉就行

    会说话的鱼 作者 · 2018年01月24日
    0

    。。。还是不懂js怎么用,意思js的话上面整段代码都不用写?那如何把 安卓 跟iOS的 地址传进去呢?

    cca1000 · 2018年01月25日
    暴力膜拖车 · 2018年01月24日

    业内做的最好的,其实是网易云音乐。除了上述常规操作,它还有个辅助方案,前提:app运行中,微信内点击别人分享的歌曲,可以直接跳转app内播放。

    回复

    0

    对,微信里是唤起不了的,需要打开safari,然后他把scheme带上了,safari打开的是这个链接:http://m.music.163.com/m/appl...

    会说话的鱼 作者 · 2018年01月24日
    0

    @会说话的鱼 安卓端,微信内可以拉起网易云

    暴力膜拖车 · 2018年01月25日
    maelweb · 2018年01月24日

    赞,楼主可以转载么

    回复

    会说话的鱼 作者 · 2018年01月24日

    可以,必须署名

    回复

    vincentxinyue · 2018年01月24日

    universal. link. 楼主能在详细的说下配置方式吗?apple-app-site-association.json怎么存放?iOS怎么配置呢?

    回复

    0

    https://domain/apple-app-site...,至于里面的信息,需要和iOS确认,他们来提供。同时,iOS也需要在后台配置才会生效

    会说话的鱼 作者 · 2018年01月25日
    武汉大魔王 · 2018年01月25日

    在iOS上试了下还是不能直接打开应用 还必须原生支持才行啊 另外我们用的方式是直接挂载应用在应用宝的链接 安卓或者iOS会自动识别

    回复

    0

    iOS在开发后台需要把你的链接配上才行

    会说话的鱼 作者 · 2018年01月25日
    0

    @会说话的鱼 这样子啊

    武汉大魔王 · 2018年01月25日
    small_dragon · 2018年01月25日

    在看源码没发现有universal link,请问是没有配置吗

    回复

    0

    universal link是你的服务器配置的一个链接,同时App的iOS后台也要配置,js干不了这些事

    会说话的鱼 作者 · 2018年01月25日
    载入中...