js判斷是否安裝某個app(android),沒有則下載
阿新 • • 發佈:2018-12-17
現在經常有寫場景需要提示使用者下載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連線
1 var download = function (schema, downUrl) { 2 var schema = "ws://localhost:8899/websocket"; 3 4 function onMessage(event) { 5 if (event.data != 'SUCCESS') { 6 console.log(event.data + "!= 'SUCCESS'"); 7 window.location.href = downUrl; 8 }9 socket.close(); 10 } 11 12 function onError(event) { 13 console.log("websocket error"); 14 window.location.href = downUrl; 15 } 16 17 function onOpen() { 18 } 19 20 function onClose() { 21 } 22 // 判斷瀏覽器 23 if (navigator.userAgent.match(/android/i) && (navigator.userAgent.match(/Chrome/) || navigator.userAgent.match(/Opera/))) {24 if (window.WebSocket) { 25 try { 26 socket = new WebSocket(schema); 27 } catch (ex) { 28 window.location.href = downUrl; 29 } 30 var message = ""; 31 socket.onmessage = onMessage; 32 socket.onopen = onOpen; 33 socket.onclose = onClose; 34 socket.onerror = onError; 35 36 if (socket.readyState == WebSocket.CONNECTING) { 37 setTimeout(function () { // websocket建立連線需要一段時間 38 if (socket.readyState == WebSocket.OPEN) { 39 if (schema != '') { 40 window.location.href = schema; 41 socket.send(message); 42 } 43 } else { 44 socket = new WebSocket(schema); 45 if (socket.readyState != WebSocket.OPEN) { 46 window.location.href = downUrl; 47 } 48 } 49 }, 1000); 50 } 51 } 52 } else { 53 window.location.href = downUrl; 54 } 55 };
當點選下載按鈕的時候,呼叫download(schema,downUrl)方法即可。
但是這種方法存在一個嚴重的問題:當app不在程序中存活時,我們是無法成功call起的,這樣,我們就需要在客戶端做一些工作,讓你的app一直存活在程序中。
二、監聽當前頁面是否失去焦點,來判斷是否需要呼叫下載
首先,使用setTimeout做延時處理:
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); }
如果有哪裡寫的不對的,歡迎討論!