手机浏览器跳转APP
背景
对于APP来讲，回流分享页是最好的最便宜的也是最病毒式的拉新方式。让新用户去下载APP是重要的。对老用户来讲，能够直接调起APP也是提高用户体验和让用户有侵入式体验的重要手段。因此咱们一块儿来看看有哪些方式能够唤起APP的html
概念叙述
调起APP在不一样平台用不一样的方式，主要就分3个 * URI Scheme * universal Link * Android App Links 如今仍是有不少第三方来协助你处理这个事情，经过接入他们的SDK和客户端代码来处理，可是万变不离其宗，全部的第三方也离不开这3种方式。前端
- URI Scheme:
- URI Scheme 是iOS，Android平台都支持，只须要原生APP开发时注册 scheme ， 用户点击到此类连接时，会自动唤醒APP，借助于 URL Router 机制，则还能够跳转至指定页面。
- <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]
- ：是scheme的名称，表明着协议名称。
- ：它包含 authority 和 path。
- ：可选项目，隔开或&隔开的键值对=
- ：可选项目包，其它额外的标识信息 例如： git://github.com/user/project-name.git ftp://user1:1234@地址 musically://musical?id=xxxx&key=xxxx
- universal Link:
- iOS9 后推出的一项功能，通用连接，对于前端即访问一个https的url,若是这个url带有你提交给开发平台的配置文件中匹配规则的内容，iOS系统会去尝试打开你的app，若是打不开，系统就会在浏览器中转向你要访问的连接。
- universal Link 工做方式以下：
- 访问web link
- iOS访问 https://xxxxxxx/apple-app-site-association 并解析，获取文件中的信息(App的Team ID和Bundle ID)
- 经过Bundle ID 检查本地是否存在对应app，和检查PATH信息等，若是有app打开app，若是没有则跳转对应web link(可经过代码实现跳去app Stroe)
- Android App Links:
- 在2015年的Google I/O大会上，Android M宣布了一个新特性：App Links让用户在点击一个普通web连接的时候能够打开指定APP的指定页面，前提是这个APP已经安装而且通过了验证，不然会显示一个打开确认选项的弹出框，只支持Android M以上系统。
- 简单的说就是创建APP和某个连接的关联，避免系统在处理该类型连接时弹出选择框。弹框最多见的就是浏览器打开时的选择框。弹出选择框是应用注册了相应scheme，applinks的做用是避免在打开本身域名的连接时弹出选择（前提是注册了相应scheme），能够实现直接打开本身关联的app。
对比/优劣
- URI Scheme: 根据图片能够看到URI Scheme的兼容性是最高，在使用的过程当中，会发现有不少限制:
- 当要被唤起的app没有安装时，这个连接就会出错。在国内很是杂乱的浏览器中，会出错的现象会不少种类型。
- 当注册有多个scheme相同的时候，目前没有办法区分。
- 不支持从其余app中的UIWebView中跳转到目标app 也就由于会有这些缘由，apple和android都出现了本身第二套解决方案。
- universal Link 从连接上看来，是一个web link，因此也就解决了当没有app时，跳转也不会出现报错，因此相对Scheme优点就提现出来了.
- 当已经安装app，不须要加载任何web页面，app就会当即启动；app没有安装，就会跳去对应的web link。
- universal Link 是从服务器上查询是哪一个app须要被打开，因此不会存在冲突问题
- universal Link 支持从其余app中的UIWebView中跳转到目标app
- 隐私性，提供universal Link给别的app进行app间的交流，然而对方并不可以用这个方法去检测你的app是否被安装。 固然universal Link也不是十全十美的,缺陷也是存在的:
- 会记住用户的选择：在用户点击了Universal link以后，iOS会去检测用户最近一次是选择了直接打开app仍是打开网站。一旦用户点击了这个选项，他就会经过safiri打开你的网站。而且在以后的操做中，默认一直延续这个选择，除非用户从你的webpage上经过点击Smart App Banner上的OPEN按钮来打开。
- app link 和 universal Link 差别不大。也是为了更好的提供调起app出现的google的方案。优势与 universal Link 差很少，缺点主要以下：
- 国内的支持相对较差，在有的浏览器或者手机ROM中并不能连接至APP，而是在浏览器中打开了对应的连接。
- 在询问是否用APP打开对应的连接时，若是选择了“取消”而且“记住选择”被勾上，那么下次你再次想连接至APP时就不会有任何反应
不管哪种方式目前都没有解决几个问题： * 若是设备上没有安装这个app的时候，安装完毕后，没法保留住此时用户停留的上下文。 * 由于web没有办法监听到APP是否安装，因此都须要经过一些手段来兼容调起app或者是去下载页android
使用 & 须要注意的内容
- URI Scheme：
- 使用: 这种方式是当期使用最普遍，也是最简单的，可是须要手机，APP支持 URI Scheme 。
- 须要注意的内容 & 遇到的问题： 其实使用URI Scheme 部分前端没有太多能够排查的问题，会遇到的问题主要是两个部分。1. 在android的兼容性处理（国内的浏览器无力吐槽ing），2. 当没有安装app的状况，URI Scheme 会有各类报错，也须要处理…
<!-- 唤醒APP并跳转至指定的path页面 -->
<a href="<scheme>://<path>?<params>=<value>">打开APP</a>
<!-- JS设置iframe src跳转至指定的path页面 -->
//建立一个隐藏的iframe
var ifr = document.createElement('iframe');
ifr.src = '<scheme>://<path>?<params>=<value>';
ifr.style.display = 'none';
document.body.appendChild(ifr);
//记录唤醒时间
var openTime = +new Date();
window.setTimeout(function(){
document.body.removeChild(ifr);
//若是setTimeout 回调超过2500ms，则弹出下载
if( (+new Date()) - openTime > 2500 ){
window.location = '指定的下载页面';
}
},2000)
- universal Link & app Links
- 使用：对于有app的用户，只是打开一个链接，可是须要注意的是须要考虑到没有APP的用户。(我的的解决方案：针对域名来判断，当域名为特定的universal Link 的域名，则跳转去下载页面）
- 须要注意的内容 & 遇到的问题：
- apple-app-site-association 和 assetlinks.json 的配置
- 须要保证使用的连接跨域(universal Link)
- 直接将universal Link 贴入浏览器的url中不会生效
- window.onload 或者用户没有任何事件触发的状况下，universal Link也不会生效
两大平台的特殊处理(facebook & twitter)
facebook 和 twitter 做为国外的两大信息聚合平台，对于在他们app中调起app也有本身的一套方式。 根据要求经过添加META头来处理打开APP facebook:ios
<meta property="fb:app_id" content="xxxxxx" />
<meta property="og:type" content="xxxx"/>
<meta property="og:title" content="xxx" />
<meta property="al:ios:url" content="{{ uri scheme }}" />
<meta property="al:android:url" content="{{ uri scheme }}" />
<meta property="al:ios:app_store_id" content="{{app_store_id}}" />
<meta property="al:ios:app_name" content="{{xxx}}" />
<meta property="al:android:app_name" content="{{xxx}}" />
<meta property="al:android:package" content="{{android:package}}" />
twitter:git
<meta name="twitter:card" content="app" />
<meta name="twitter:site" content="xxxxx" />
<meta name="twitter:title" content="xxxxx" />
<meta name="twitter:description" content="xxxxxxx" />
<meta name="twitter:image" content="xxxx" />
<meta name="twitter:app:name:iphone" content="xxx">
<meta name="twitter:app:id:iphone" content="xxx">
<meta name="twitter:app:url:iphone" content="{{Scheme}}">
<meta name="twitter:app:name:ipad" content="xxx">
<meta name="twitter:app:id:ipad" content="xxx">
<meta name="twitter:app:url:ipad" content="{{Scheme}}">
<meta name="twitter:app:name:googleplay" content="xxx">
<meta name="twitter:app:id:googleplay" content="xxx">
<meta name="twitter:app:url:googleplay" content="{{Scheme}}">
使用 checkList(前端)
-
schemegithub
- iOS 和 android 是否已经支持 此scheme
- js处理兼容代码
-
universal Link (apple-app-site-association 官方文档)web
- HTTPS的域名
- iOS9 以上
- universal Link 是否跨域
- universal Link的落地页是不是下载页面
- apple-app-site-association 配置在 host的根目录和.well-known下
- apple-app-site-association会在第一次打开app或者更新app时候会去拉去,因此确认是否更新了apple-app-site-association后没有更新过app
- 检查apple-app-site-association paths 大小写敏感 支持通配符
- 该设备的用户选择了直接打开app仍是打开网站，若是选择打开网站，须要经过smart banner 从新启用
- 跳转处理是不是在用户事件中触发，而不是进入页面后直接触发
-
app links (android app links官方文档)json
- HTTPS的域名
- 跳转后的落地页是不是下载页面
- assetlinks.json 配置在 host的.well-known下
- 官方生成/检测: android app links检测
-
facebook (facebook app link官方文档)跨域
- 将须要的meta头信息填充完毕
- 检测连接 分享调试器 - Facebook for Developers , 确认分享连接中获取到了所须要的meta头
- 分享过的连接会有缓存，在检测中清楚缓存
- 若是web和wap连接一致，确认在web中也添加了相同的meta头，facebook会默认从web中获取
-
twitter (Twitter app card官方文档)浏览器
- 将须要的meta头信息填充完毕
- 检测连接 Twitter app card 检测
- 若是web和wap连接一致，确认在web中也添加了相同的meta头，facebook会默认从web中获取