浏览器中唤醒APP最佳实践

打开还是下载

理想情况下，平台之间无缝衔接是最好的，但现实并不是这样，首先的问题是没法知道设备有没安装应用，app分享到微信后，微信倒是会给打开的网址加isappinstalled，所以流程是先尝试打开app，如果情况不妙的话，再跳app store或给apk包。

按钮的文案改成“打开”，能勾起用户点击欲望。

微信

如果是IOS系统，并且系统版本大于等于9，并且isappinstalled为1，则使用Universal Links。

如果打开的是二级页面，则需要做个中转页，提示用户在浏览器里打开。

如果打开的是app首页，则直接跳应用宝。

其他情形

对，使用schema打开app，但兼容性真是令人大跌眼镜，所以不能一股脑的使用 schema。促使我做以下详细罗列的一个原因是，我们产品的原先下载页面在uc上，用户点击点了下载但等了相对漫长的时间才会出现下载apk提示，这样不好。

android

	uc	sogou browser/app	baidu browser/app	qq browser	chrome	liebao	2345	QQ	weibo
location	N	N	N	Y	Y	会提示“页面尝试打开外部程序” N	Y	Y
iframe	N	N	N	Y	N	会提示“页面尝试打开外部程序” N	Y	N
pagehide
visibilitychange

IOS

	uc	sogou browser	baidu browser	qq browser	chrome	liebao	2345	QQ	weibo
location	Y	Y	N	Y	Y				N
iframe	Y	Y	N	Y	N				N
pagehide
visibilitychange	N	N		Y	Y

测试两个平台的典型的情形，算是这篇文章最有价值的东西了。。我们可以得出，安卓平台用白名单（chrome、qq和2345），IOS用黑名单（baidu和weibo）这样的结论。

关于是否已经打开app的判断，我们可以用visibilitychange去检测，兼容性相对而言其实还不错的，详情请看https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/（需翻墙），当然不支持就不支持吧。

var appTimer = setTimeout(function () {
    window.location.href = downloadUrl;
}, 1000);

document.addEventListener('visibilitychange', handleVisibilitychange);

function handleVisibilitychange() {
    document.removeEventListener('visibilitychange', handleVisibilitychange);

    // fires when user switches tabs, apps, goes to homescreen, etc.
    if (document.visibilityState === 'hidden') {
        clearTimeout(appTimer);
    }
}

注意这里的timeout设得比较短，不推荐设成2秒或者3秒，等待总是不好的。

其他方式

至于其他比如定时器被挂起之类的用于检测是否打开了app的方式，易过时不推荐。