Posted on 2018-10-23 19:46 Bowen Huang 阅读(…) 评论(…) 编辑 收藏

现在经常有写场景需要提示用户下载app, 但是如果用户已经安装，我们希望是直接打开app。

实际上，js是没有判断app是否已经安装的方法的，我们只能曲线救国。

 

首先，我们需要有call起app的schema, 已经下载地址，比如：

  1. var schema = 'myApp://main';
  2. var downUrl = 'https://yourmain.com/downloadUrlTag';

1. android app需要实现websocket的连接功能，开放一个特定的端口如8899；

2. 页端js建立websocket连接

  1.  1 var download = function (schema, downUrl) {
  2.  2     var schema = "ws://localhost:8899/websocket";
  3.  3 
  4.  4     function onMessage(event) {
  5.  5         if (event.data != 'SUCCESS') {
  6.  6             console.log(event.data + "!= 'SUCCESS'");
  7.  7             window.location.href = downUrl;
  8.  8         }
  9.  9         socket.close();
  10. 10     }
  11. 11 
  12. 12     function onError(event) {
  13. 13         console.log("websocket error");
  14. 14         window.location.href = downUrl;
  15. 15     }
  16. 16 
  17. 17     function onOpen() {
  18. 18     }
  19. 19 
  20. 20     function onClose() {
  21. 21     }
  22. 22     // 判断浏览器
  23. 23     if (navigator.userAgent.match(/android/i) && (navigator.userAgent.match(/Chrome/) || navigator.userAgent.match(/Opera/))) {
  24. 24         if (window.WebSocket) {
  25. 25             try {
  26. 26                 socket = new WebSocket(schema);
  27. 27             } catch (ex) {
  28. 28                 window.location.href = downUrl;
  29. 29             }
  30. 30             var message = "";
  31. 31             socket.onmessage = onMessage;
  32. 32             socket.onopen = onOpen;
  33. 33             socket.onclose = onClose;
  34. 34             socket.onerror = onError;
  35. 35 
  36. 36             if (socket.readyState == WebSocket.CONNECTING) {
  37. 37                 setTimeout(function () { // websocket建立连接需要一段时间
  38. 38                     if (socket.readyState == WebSocket.OPEN) {
  39. 39                         if (schema != '') {
  40. 40                             window.location.href = schema;
  41. 41                             socket.send(message);
  42. 42                         }
  43. 43                     } else {
  44. 44                         socket = new WebSocket(schema);
  45. 45                         if (socket.readyState != WebSocket.OPEN) {
  46. 46                             window.location.href = downUrl;
  47. 47                         }
  48. 48                     }
  49. 49                 }, 1000);
  50. 50             }
  51. 51         }
  52. 52     } else {
  53. 53         window.location.href = downUrl;
  54. 54     }
  55. 55 };

当点击下载按钮的时候，调用download(schema,downUrl)方法即可。

但是这种方法存在一个严重的问题：当app不在进程中存活时，我们是无法成功call起的，这样，我们就需要在客户端做一些工作，让你的app一直存活在进程中。

首先，使用setTimeout做延时处理：

  1. var isBlur = false;
  2. location.href = schema;
  3. setTimeout(function() {
  4.     if (!isBlur) {
  5.       location.href = url;
  6.     }
  7. }, 1000);

那么如何来设置isBlur的值呢，这里提供两种方法：

1. 监听window的blur事件

  1. // window 每次失去焦点
  2. window.onblur = function() {
  3.     console.log('失去焦点');
  4.     isBlur = true;
  5. };
  6.      
  7. // window 每次获得焦点
  8. // window.onfocus = function() {
  9. //    console.log('获得焦点');
  10. //    isBlur = false;
  11. // }

2. 自定义事件监听visibilityChange事件，来判断document的hidden属性，

简单写法：

  1. document.addEventListener("visibilitychange", function(){
  2.     console.log(document.hidden ? "失去焦点" : "获得焦点";)
  3.     isBlur = document.hidden;
  4. });

兼容写法：

  1. var hiddenProperty = 'hidden' in document ? 'hidden' :    
  2.     'webkitHidden' in document ? 'webkitHidden' :    
  3.     'mozHidden' in document ? 'mozHidden' :    
  4.     null;
  5. var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
  6. var onVisibilityChange = function(){
  7.     if (!document[hiddenProperty]) {    
  8.         console.log('获得焦点'); 
  9.         isBlur = false;
  10.     } else {
  11.         console.log('失去焦点');
  12.         isBlur = true;
  13.     }
  14. }
  15. document.addEventListener(visibilityChangeEvent, onVisibilityChange);

完整代码:

  1. var download = function() {
  2.     var isBlur = false;
  3.     location.href = schema;
  4.     setTimeout(function() {
  5.         if (!isBlur) {
  6.           location.href = url;
  7.         }
  8.     }, 1000);
  11.     // window 每次失去焦点
  12.     window.onblur = function() {
  13.         console.log('失去焦点');
  14.         isBlur = true;
  15.     };
  17.     var hiddenProperty = 'hidden' in document ? 'hidden' :    
  18.         'webkitHidden' in document ? 'webkitHidden' :    
  19.         'mozHidden' in document ? 'mozHidden' :    
  20.         null;
  21.     var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
  22.     var onVisibilityChange = function(){
  23.         if (document[hiddenProperty]) {    
  24.             console.log('失去焦点');
  25.             isBlur = true;
  26.         }
  27.     }
  28.     document.addEventListener(visibilityChangeEvent, onVisibilityChange);
  29. }

 

如果有哪里写的不对的，欢迎讨论！

 

版权声明：本文为huangbx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/huangbx/p/js-call-app-judge-install.html