现在各类app,分享出去的H5页面中,一般都会带着一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载。这是一个很正常的推广和导流量的策略,最近产品经理就提出了这样的一个需求,做一个像今日头条功能一样的带打开app的下载条。

实现这个功能,我们需要解决两个问题
1、js如何唤起本地app
2、js如何知道手机已经安装了对应的应用

js如何唤起本地app

既然是通过网页调用app,这个当然涉及到与app的通信。通过咨询ios和android的同事,ios与android都支持一种叫做schema协议的链接。这种协议的类似于我们熟悉的http协议,我们只要跟app协商好协议头,app通过拦截到这个协议头的请求就可以知道有网页要求调用。而对于js来说,我们这要像a标签的href一样来激活这个协议的链接就行了。

比如:

<a href="myapp://">调起app</a>

这种方式ios和android都可以共用

2、如何知道手机已经安装的对应的应用对于这个功能的实现,首先想到的是查询应用是否存在,但是这种方法显而易见是行不通的,比如说你在UC浏览器,微信中,我们无法主动的去查询我们系统中是否安装了该应用。所以这个判断是无法实现。所以我们就需要采用曲线救国的方式来实现。既然我们可以唤起app,那我们就可以忽略判断,直接唤起app,如果用户没有安装,我们做一个容错处理。

结合这个思路,我们基本可以得到我们的实现方案

var iframe = document.createElement('iframe');
var body = document.body;
iframe.style.display = "none";
ar timer = null; var openapp = document.getElementById('openapp');
openapp.addEventListener('click', function() {
body.appendChild(iframe);
iframe.src = "appschema://";
timer = setTimeout(function() {
wondow.location.href = "download.html"; //容错的下载页面
}, 500);
}, false)

写完代码,做了测试,发现这样的实现有很多问题
1、微信无法调起。微信对于链接的跳转限制很严重,很多下载外链都引导到浏览器打开
2、调起app返回浏览器的时候,会跳转到下载页面,既然用户已经下载了app,再让页面跳转到下载页很不友好
3、ios9+的safari无法通过iframe跳转到其他页面

有问题就需要解决

1、对于微信或者QQ空间,在网上查找资料,如果是在应用宝上线的应用,应用宝提供了微下载来实现微信和QQ打开app,先跳转到应用宝的的下载链接,然后下载宝链接会判断打开对应的app,具体参考(http://wiki.open.qq.com/index.php?title=mobile/%E5%BA%94%E7%94%A8%E5%AE%9D%E5%BE%AE%E4%B8%8B%E8%BD%BD)但是应用宝的微下载有个问题,ios微信和QQ中无法打开对应的应用,只是会通过你应用宝配置的appstore下载链接跳转到对应的下载页面,再从appstore里面打开应用。所以这个问题还是不能完全解决,只能完美解决android的机器

2、针对问题2,网上有人通过监控页面的pagehide和visibilitychange方法来实现禁止跳转,具体的实现思路是监控页面是否隐藏,利用延时如果页面已经打开app,此时页面会是隐藏状态,触发页面的隐藏事件,clear延时事件,禁止跳转,不过这个方案会出现问题,有一些浏览器在app打开,离开浏览器之后,js事件不在执行,也就是此时无法监控的页面的隐藏,在返回页面的时候,js继续执行,但是事件监控的还是页面展示的状态,无法clear延时事件,所以该方式无法完美解决这个问题

后来找到了另外的解决方案,调起app需要唤起另外的进程,所以js的进程会挂起,导致前后有一个时间差,记录前后的事件差对比就可以判断是否调起了app了

iframe.src = "appschema://";
var timer = null,
t = Date.now();
timer = setTimeout(function() {
if (Date.now() - t > 1200) {
clearTimeout(timer);
return false;
}
}, 1000);

3、对于问题3,Apple为iOS 9发布了一个所谓的通用链接的深层链接特性,即Universal links。只要在app中授权好域名,在网页中只要打开对应域名链接,都会检测与域名绑定的app是否存在,如果存在,直接调起app,具体参考(http://stackoverflow.com/questions/31891777/ios-9-safari-iframe-src-with-custom-url-scheme-not-working),并且该方法不会被微信拦截,可以在微信中使用,这样也就解决了我们在腾讯平台下ios无法通过微下载打开的问题

最后再来整理一下我们的思路
1、ios通过Universal links,针对ios9一下和以前版本没有实现Universal links,在绑定好的域名下做一个中间页,直接跳转到中间页
2、android分平台,如果是微信或者QQ(可以通过用户代理检测),直接通过微下载,其他浏览器,直接用schema协议

具体代码实现如下

var url = {
open: 'duchuang://',
down: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.nayun.framework'
},
iframe = document.createElement('iframe');
iframe.style.cssText = 'display:none;width=0;height=0';
var timer = null,
//点击第三方下载
isAndroid = !!navigator.userAgent.match(/android/ig),
isIos = !!navigator.userAgent.match(/iphone|ipod/ig),
isIpad = !!navigator.userAgent.match(/ipad/ig),
isWeixin = (/MicroMessenger/ig).test(navigator.userAgent),
isQQ = (/qq/ig).test(navigator.userAgent),
openapp = document.getElementById('cal-app');
openapp.addEventListener('click', function() {
if (isIos) {
window.location.href = "https://appdetail.netwin.cn/download.html"
} if (isAndroid) {
if (isWeixin || isQQ) { //andorid微信和QQ走微下载
window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.nayun.framework&android_schema=' +  url;
} else {
body.appendChild(iframe);
iframe.src = url.open;
var t = Date.now();
timer = setTimeout(function() {
if (Date.now() - t > 1200) {
clearTimeout(timer);
return false;
}
if (document.webkitHidden || document.hidden) {
return false;
}
window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.nayun.framework';
}, 1000);
}
}
}, false) document.addEventListener("webkitvisibilitychange", function() {
var tag = document.hidden || document.webkitHidden;
if (tag) {
clearTimeout(timer);
}
}); window.addEventListener('pagehide', function() {
clearTimeout(timer);
})

H5页面中唤起native app的更多相关文章

  1. 浏览器中唤起native app || 跳转到应用商城下载

    前段时间遇到一个小需求:要求在分享出来的h5页面中,有一个立即打开的按钮,如果本地安装了我们的app,那么点击就直接唤起本地app,如果没有安装,则跳转到下载. 因为从来没有做过这个需求,因此这注定是 ...

  2. Android/IOS 微信及浏览器(h5)中唤起本地APP,唤起浮层,然后用外部浏览器打开唤起某本地APP

    1 前言 微信点击链接,点击唤起某APP,在微信点开,默认是微信浏览器,点击button唤起,则会先提示浮层,然后用外部浏览器打开即可. 作为记录使用. 2 代码 相关源码如下: html: < ...

  3. H5页面中判断是安卓手机还是ios手机的方法;APP页面中嵌套的H5跳转到APP其他页面的方法。

    (一).在H5页面中,可以直接利用如下的方法来进行判断是安卓还是ios. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu ...

  4. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  5. H5页面中尝试调起APP

    安卓版本5.0以上 IOS版本10.0以上 采用事件触发的方式处理唤醒APP 市面上常见的功能 这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等... 点击后会调起APP或者打开下载页面或者直接进 ...

  6. iOS/Android 浏览器(h5)及微信中唤起本地APP

    在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...

  7. 客户端相关知识学习(四)之H5页面如何嵌套到APP中

    Android原生如何渲染H5页面 Android与 H5 的交互方式大概有以下 1 种: 利用WebView进行交互(系统API) iOS原生如何渲染H5页面 iOS 与 H5 的交互方式大概有以下 ...

  8. 前端:微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

  9. 混合app开发,h5页面调用ios原生APP的接口

    混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...

随机推荐

  1. Git的基本使用方法和安装&心得体会(使用git命令行)

    这是补发的,使用命令行操作的. (1)选择本地repository的路径 找到后点鼠标右键,选择git bash here. (2) clone到本地 在命令行输入 git clone ADDRESS ...

  2. POJ 2096 Collecting Bugs 期望dp

    题目链接: http://poj.org/problem?id=2096 Collecting Bugs Time Limit: 10000MSMemory Limit: 64000K 问题描述 Iv ...

  3. 小学四则运算结对项目报告(GUI)

    小学四则运算结对项目报告(GUI) 一.Coding.Net项目地址: https://git.coding.net/wsshr/Calculation.git 二.PSP表格(完成前): PSP 任 ...

  4. mac上查找nginx安装位置

    在终端输入: nginx -V 查看nginx版本及安装的本地位置 ngxin -v 查看nginx版本(此方法依然可以检测是否安装某一软件,如git,hg等)

  5. Python模块Scrapy导入出错:ImportError: cannot import name xmlrpc_client

    Mac(OS version: OS X Yosemite 10.10.5)上安装Scrapy模块,使用时出现: from six.moves import xmlrpc_client as xmlr ...

  6. Jvm dump介绍与使用(内存与线程)

    很多情况下,都会出现dump这个字眼,java虚拟机jvm中也不例外,其中主要包括内存dump.线程dump. 当发现应用内存溢出或长时间使用内存很高的情况下,通过内存dump进行分析可找到原因. 当 ...

  7. Luogu 5108 仰望半月的夜空(后缀数组)

    如果是要求左端点最大,直接求出SA,找前缀名次最小值就可以了.虽然现在要左端点最小,但我们已经知道了这个字典序最小的串是什么,找到名次数组上的合法区间求最小值即可.我也不知道为什么我会弃掉这个题,可能 ...

  8. P1503 鬼子进村

    题目背景 小卡正在新家的客厅中看电视.电视里正在播放放了千八百次依旧重播的<亮剑>,剧中李云龙带领的独立团在一个县城遇到了一个鬼子小队,于是独立团与鬼子展开游击战. 题目描述 描述 县城里 ...

  9. 【转】ORA-00054 的解决方法

    原地址:http://blog.sina.com.cn/s/blog_681cd80d0100l4rd.html 系统有一个不用的索引,想删除这个索引, SQL> drop index GPST ...

  10. 【刷题】BZOJ 4031 [HEOI2015]小Z的房间

    Description 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含n*m个格子的格状矩形,每个格子是一个房间或者是一个柱子.在一开始的时候,相邻的格子之间都有墙隔着. ...