js判断是否安装某个android app,没有安装下载该应用(websocket通信,监听窗口失去焦点事件)
现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app。
实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国。
首先,我们需要有call起app的schema, 以及下载地址,比如:
var schema = 'myApp://main';
var downUrl = 'https://yourmain.com/downloadUrlTag';
一、使用websocket通信实现页端和app的通信
1. android app需要实现websocket的连接功能,开放一个特定的端口如8899;
2. 页端js建立websocket连接
var download = function (schema, downUrl) {
var ws = "ws://localhost:8899/websocket"; function onMessage(event) {
if (event.data != 'SUCCESS') {
console.log(event.data + "!= 'SUCCESS'");
window.location.href = downUrl;
}
socket.close();
} function onError(event) {
console.log("websocket error");
window.location.href = downUrl;
} function onOpen() {
} function onClose() {
}
// 判断浏览器
if (navigator.userAgent.match(/android/i) && (navigator.userAgent.match(/Chrome/) || navigator.userAgent.match(/Opera/))) {
if (window.WebSocket) {
try {
socket = new WebSocket(ws);
} catch (ex) {
window.location.href = downUrl;
}
var message = "";
socket.onmessage = onMessage;
socket.onopen = onOpen;
socket.onclose = onClose;
socket.onerror = onError; if (socket.readyState == WebSocket.CONNECTING) {
setTimeout(function () { // websocket建立连接需要一段时间
if (socket.readyState == WebSocket.OPEN) {
if (schema != '') {
window.location.href = schema;
socket.send(message);
}
} else {
socket = new WebSocket(ws);
if (socket.readyState != WebSocket.OPEN) {
window.location.href = downUrl;
}
}
}, 1000);
}
}
} else {
window.location.href = downUrl;
}
};
当点击下载按钮的时候,调用download(schema,downUrl)方法即可。
但是这种方法存在一个严重的问题:当app不在进程中存活时,我们是无法成功call起的,这样,我们就需要在客户端做一些工作,让你的app一直存活在进程中。
二、监听当前页面是否失去焦点,来判断是否需要调用下载
首先,我们的想法是,当用户点击下载后,先尝试call起APP,使用setTimeout做延时处理,在延时中判断是否call起成功,如果不成功,则直接下载,我们如何认为call其成功呢,当一个应用被调用的时候,浏览器会被隐藏,那么当前页面会失去焦点。
这种情况适用于国外使用chrome和uc browser的环境,国内手机浏览器百花齐放,各类厂商对deeplink都有不同的处理方式,所以兼容性不好。
var isBlur = false;
location.href = schema;
setTimeout(function() {
if (!isBlur) {
location.href = url;
}
}, 1000);
那么如何来设置isBlur的值呢,这里提供两种方法:
1. 监听window的blur事件
// window 每次失去焦点
window.onblur = function() {
console.log('失去焦点');
isBlur = true;
}; // window 每次获得焦点
// window.onfocus = function() {
// console.log('获得焦点');
// isBlur = false;
// }
2. 自定义事件监听visibilityChange事件,来判断document的hidden属性,
简单写法:
document.addEventListener("visibilitychange", function(){
console.log(document.hidden ? "失去焦点" : "获得焦点");
isBlur = document.hidden;
});
兼容写法:
var hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden' :
null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
if (!document[hiddenProperty]) {
console.log('获得焦点');
isBlur = false;
} else {
console.log('失去焦点');
isBlur = true;
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
完整代码:
var download = function() {
var isBlur = false;
location.href = schema;
setTimeout(function() {
if (!isBlur) {
location.href = url;
}
}, 1000); // window 每次失去焦点
window.onblur = function() {
console.log('失去焦点');
isBlur = true;
}; var hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden' :
null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
if (document[hiddenProperty]) {
console.log('失去焦点');
isBlur = true;
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
}
如果有哪里写的不对的,欢迎讨论!
js判断是否安装某个android app,没有安装下载该应用(websocket通信,监听窗口失去焦点事件)的更多相关文章
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...
- Android如何监听蓝牙耳机的按键事件(转)
源: Android如何监听蓝牙耳机的按键事件 写在前面: 直接想要代码很简单,你直接把滚动条拉到最底端就可以看到.如果想要十分地了解为什么,那就按照我规划的一步一步来理解.以下测试环境以手头上有的「 ...
- Android怎样监听蓝牙耳机的按键事件
Android怎样监听蓝牙耳机的按键事件 写在前面: 直接想要代码非常easy,你直接把滚动栏拉到最底端就能够看到.假设想要十分地了解为什么,那就依照我规划的一步一步来理解.下面測试环境以手头上有的「 ...
- JS控制全屏,监听退出全屏事件
实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); ...
- js判断设备,跳转app应用、android市场或者AppStore
js移动设备判断方法大全 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" > ...
- Android APP的安装路径
转载自:http://blog.csdn.net/libaineu2004/article/details/25247711 一.安装路径在哪? Android应用安装涉及到如下几个目录: syste ...
- js判断操作系统windows,ios,android(笔记)
使用JS判断用户使用的系统是利用浏览器的userAgent. navigator.userAgent:userAgent 获取了浏览器用于 HTTP 请求的用户代理头的值. navigator.pla ...
- js 判断当前操作系统 ios, android, 电脑端
一 . js判断移动端的操作系统(ios或Android) $(function () { var u = navigator.userAgent; var isAndroid = u.index ...
- Android : App客户端与后台服务的AIDL通信以及后台服务的JNI接口实现
一.APP客户端进程与后台服务进程的AIDL通信 AIDL(Android Interface definition language-“接口定义语言”) 是 Android 提供的一种进程间通信 ( ...
随机推荐
- silverlight 从数据库获取到数据,动态生成XMLWEN文件,并获取文件进行操作
// Silverlight中的独立存储是其内部的可信任的可访问文件空间,在这里你可以使用Silverlight随意的创建.读取.写入.删除目录和文件,它有一些类似于Cookie,但是它可以在客户端保 ...
- linux shell必知必会sed、awk
sed是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送往 ...
- C#参考教程 http://www.csref.cn
推荐 C#参考教程 http://www.csref.cn
- tp5.0隐藏路由后缀index.php
一开始的路由是有index.php结尾的 接下来开始修改主要文件
- linux学习笔记2 - linux常用命令
转载请标注原链接:http://www.cnblogs.com/xczyd/p/5543731.html 第一篇博客:linux学习笔记1-ubuntu的安装与基本设置 之中,已经介绍了如何安装lin ...
- java中,字符串类型的时间数据怎样转换成date类型。
将字符串类型的时间转换成date类型可以使用SimpleDateFormat来转换,具体方法如下:1.定义一个字符串类型的时间:2.创建一个SimpleDateFormat对象并设置格式:3.最后使用 ...
- PCP
1, What is PCP?Prior Comparable Period2, Why needs PCP?This is to compare the value with history val ...
- 前端---JQuery初识
---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.javascript基础部分包括三个部分: ECMAScript:JavaScript的语法标准 ...
- spring4注解配置datasource方式
package com.boot.config; import org.springframework.context.annotation.AnnotationConfigApplicationCo ...
- day-14带参装饰器、迭代器
带参装饰器 通常,装饰器为被装饰的函数添加新功能,需要外界的参数 -- outer参数固定一个,就是func -- inner参数固定同被装饰的函数,也不能添加新参数 -- 可以借助函数的嵌套定义, ...