现在经常有写场景需要提示用户下载 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 schema = "ws://localhost:8899/websocket";
- function onMessage(event) {
- if (event.data != 'SUCCESS') {
- console.log(event.data + "!='SUCCESS'");
- Windows.location.href = downUrl;
- }
- socket.close();
- }
- function onError(event) {
- console.log("websocket error");
- Windows.location.href = downUrl;
- }
- function onOpen() {
- }
- function onClose() {
- }
- // 判断浏览器
- if (navigator.userAgent.match(/Android/i) && (navigator.userAgent.match(/Chrome/) || navigator.userAgent.match(/Opera/))) {
- if (Windows.WebSocket) {
- try {
- socket = new WebSocket(schema);
- } catch (ex) {
- Windows.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 != '') {
- Windows.location.href = schema;
- socket.send(message);
- }
- } else {
- socket = new WebSocket(schema);
- if (socket.readyState != WebSocket.OPEN) {
- Windows.location.href = downUrl;
- }
- }
- }, 1000);
- }
- }
- } else {
- Windows.location.href = downUrl;
- }
- };
当点击下载按钮的时候, 调用 download(schema,downUrl) 方法即可.
但是这种方法存在一个严重的问题: 当 App 不在进程中存活时, 我们是无法成功 call 起的, 这样, 我们就需要在客户端做一些工作, 让你的 App 一直存活在进程中.
二, 监听当前页面是否失去焦点, 来判断是否需要调用下载
首先, 使用 setTimeout 做延时处理:
- var isBlur = false;
- location.href = schema;
- setTimeout(function() {
- if (!isBlur) {
- location.href = url;
- }
- }, 1000);
那么如何来设置 isBlur 的值呢, 这里提供两种方法:
1. 监听 Windows 的 blur 事件
- // Windows 每次失去焦点
- Windows.onblur = function() {
- console.log('失去焦点');
- isBlur = true;
- };
- // Windows 每次获得焦点
- // Windows.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);
- // Windows 每次失去焦点
- Windows.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);
- }
如果有哪里写的不对的, 欢迎讨论!
来源: https://www.cnblogs.com/huangbx/p/js-call-app-judge-install.html