探讨从H5页面拉起APP的技术方案和问题

从H5页面里拉起或叫唤起APP（APP需已经安装在手机上），有两种技术方案，一种通过HTTP链接（iOS叫 Universal Link，安卓叫APP Links技术）拉起技术，一种是通过自定义scheme拉起技术（也有叫深度链接deeplink的）。这两个技术适用不同的场景，也有不同的局限性。

一、通过HTTP链接拉起

要想通过HTTP(s)链接直接拉起APP，需要APP本身做一些配置和写一些代码实现，还需要在你网站服务器配置相关的json文件。例如配置服务器host，能打开页面的path等。有些了这些配置，苹果服务器或者谷歌的服务器验证了这些配置，就可以通过相关的HTTP链接来打开APP了

这里不管是iOS叫 Universal Link，还是安卓的APP Links，他们的技术方案是基本一样的，只是不同的平台稍微有些不一样的而已。基本规则是：

先按照要求生成一个配置文件，json格式的，里面包括了一些必要的信息，例如安卓的包名，apk签名等，iOS的appID,匹配URL的path
将配置文件放到你的网站根目录下的.wellknown目录下，让苹果或谷歌的服务器能从这里下载这个配置文件。这个文件是关键，因为苹果或谷歌要从你网站里拉取到这个配置文件。由于你的网站只有你自己有权限上传配置文件，从而保证了安全性。
在你的APP里配置相关网站host。还有你的APP被拉起后怎么处理（打开相应页面）

网络上有很多相关教程，官方文档也有，配置起来不难，测试起来有几个问题。

确保你的手机能跟苹果或者谷歌的服务器能正常通信
验证是在你安装APP的时候，只在这时候验证。所以你遇到奇怪的问题可以卸载重装试试。对于iOS来说，你修改了配置文件中的path后，要你的APP升级后或重新安装后才会生效
iOS需要跨域才能跳转。就是说你配置的host是www.xxx.com,在Safari中打开www.xxx.com后，在这个页面跳转www.xxx.com/yyyy, 即使你在配置文件里配置了yyyy这个path，这里并不会拉起你APP。因为这里并没有跨域。但是在ww.xxx.com/yyyy这个页面上，你往下拖动，就会看到顶部有个banner（Safari自动生成的），可以通过这个banner打开APP。

二、通过自定义scheme拉起

首先让我们来看一下 URL 的组成：

[scheme:][//host][path][?query][#fragment]

这里一般做法是每个APP都自定义一个唯一的scheme，通过这个scheme来拉起APP。由于每个APP都会定义自己独有的scheme，所以一般还通过scheme来判断某个应用是否已安装在手机上。host是可选的，path是必须的。一般都是通过path来定义指定打开APP特定的页面，同时通过query来携带参数。HTTP链接其实就是一种特殊的scheme。

通常我们都是同构scheme来拉起别人的APP的。例如超级APP微信的scheme是weixin://,淘宝APP的scheme是taobao://。

scheme方式是安卓和iOS都支持的。我们微基因APP的scheme是wegene，host是com.wegene.app，首页的path是/main.要打开微基因APP首页，可以通过下面这个URL：wegene://com.wegene.app/main。我们可以在H5页面里配置这个URL超链接，点击这个超链接就可以打开APP了。

当然，APP里还是要做相应处理的。iOS要先在xcode里配置scheme，还有在AppDelegate里回调里会获取到这个URL，解析这个URL，获取到path，根据是/main，就可以知道是要打开首页了。而安卓则需要在你的MainActivity的intent-filter里配置data(scheme,host,path)，action，category等(该activity要设置export为true)

 <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:host="com.wegene.app"
                    android:path="/main"
                    android:scheme="wegene" />
            </intent-filter>

在activity里还要从intent里获取URI的data数据。

三、浏览器问题

浏览器一般有几种，一种是手机自带浏览器（安卓厂商自带浏览器，iOS的Safari），一种是通用手机浏览器，例如UC浏览器，QQ浏览器，chrome，还有一种是超级APP自带浏览器，例如微信、QQ、微博他们APP内自带浏览器

超级APP自带浏览器问题：它们都禁止了通用链接方式，也基本禁用了scheme方式。但是他们提供了一种方式给用户选择：选择第三方浏览器打开。支持通用链接技术的APP可以用这种方式来被打开。

手机自带浏览器，通用浏览器问题：不同的浏览器APP实现方式不一样。总的来说，一般都支持通用链接方式和scheme方式。但是有些可能浏览器会弹出一个弹窗来让用户确认是否同意拉起APP。

四、安卓端问题

虽然安卓支持APP Links技术，但是这个技术依赖于谷歌服务器的验证，而谷歌服务器是被墙的，所以是在国内基本不能用。所以在安卓端能用的技术只有scheme技术了。

一般浏览器可以通过scheme来跳转，但是微信里是禁用了scheme方式的。这里一种解决方案是微信选择第三方浏览器打开-->进入浏览器-->浏览器调用scheme-->进入APP相关页面。这里面浏览器页面就要做相关的检测和跳转配置了，页面多的话还要做不同页面的配置，开发量也不小。

还有一种方案，就是利用应用宝的微下载和他的APPLink机制（非谷歌的APPLinks）。实现方式是微信浏览器打开应用宝配置的页面-->拉起应用宝-->应用宝通过我们配置的scheme和path拉起我们的APP-->进入APP相关页面。这里应用的技术仍然是scheme技术（deeplink），我们在应用宝里配置好scheme和path，由它来拉起我们的APP。但是前提是我们要向应用宝申请，而且需要APP符合他们的一定条件才会通过申请。

总结

总的来说要在要在H5中拉起APP，无非就是通过专属HTTP链接技术和自定义scheme技术。然而理想很丰满，现实很骨感。在国内的所有浏览器，无论是通用浏览器APP，还是超级APP自带的浏览器，都是会做一些改造和限制。当然我们最关注的是流量霸主微信，都想从他那里引流一些用户。可是微信确实最严厉的，禁止了HTTP链接拉起APP的技术，也禁用了scheme技术，只给自家APP或者合作方留了口子。现在的做法都是引导用户点击右上角的第三个浏览器打开来拉起APP。

现在我们要想适配好全面的H5拉起APP技术，也挺难的，要考虑到微信微博等超级APP禁止所有的跳转技术，还有各式各样的浏览器支持程度也不同。现实的情况是我们做APP开发的不太懂网页开发，做网页开发的又不懂我们APP开发（还有相关的跳转技术），所以难上加难。倒是可以借助开源试试。有个还不错的开源库看上去还不错（我没仔细研究过）callapp-lib

如果你觉得这篇文章有用，请打赏小钱喝杯咖啡^_^

Category: 技术 Tagged: APP

comments