h5移動網頁喚起App

最近這個困惑了很久，不斷的有一些坑，目前還有疑問關於iOS喚起無效時會出現彈框的問題，這個最后再說

1、首先可能需要判斷當前瀏覽器的來源（目前開發的App還沒有上架，所以針對騰訊出品的大家廣為人知的微信和qq進行了特殊處理）

function  GetMobelType()  {                
	var  browser  =   {                    
		versions:   function()  {                        
			var  u  =  window.navigator.userAgent;                        
			return  {                            
				trident:  u.indexOf('Trident')  >  -1, //IE內核
				presto:  u.indexOf('Presto')  >  -1, //opera內核
				Alipay:  u.indexOf('Alipay')  >  -1, //支付寶
				webKit:  u.indexOf('AppleWebKit')  >  -1, //蘋果、谷歌內核
				gecko:  u.indexOf('Gecko')  >  -1  &&  u.indexOf('KHTML')  ==  -1, //火狐內核
				mobile:  !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
				ios:  !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
				android:  u.indexOf('Android')  >  -1  ||  u.indexOf('Linux')  >  -1, //android終端或者uc瀏覽器
				iPhone:  u.indexOf('iPhone')  >  -1  ||  u.indexOf('Mac')  >  -1, //是否為iPhone或者安卓QQ瀏覽器
				//iPhone: u.match(/iphone|ipod|ipad/),//
				iPad:  u.indexOf('iPad')  >  -1, //是否為iPad
				webApp:  u.indexOf('Safari')  ==  -1, //是否為web應用程序，沒有頭部與底部
				weixin:  u.indexOf('MicroMessenger')  >  -1, //是否為微信瀏覽器
				qq: u.match(/\sQQ/i) !== null, //是否QQ
				Safari:  u.indexOf('Safari')  >  -1,
				  ///Safari瀏覽器,
			};                    
		}()                
	};                
	return  browser.versions;            
}

　2、接下來需要搞清楚喚起的原理，這里請教大神，喚起是調用協議，因為我們是不能判斷有沒有app，只能嘗試喚起，如果喚起App就是有，正常來說要將喚起當做沒喚起來做，保持整個流程的穩定性，下面是喚起的代碼。

經測試發現Android和iOS在微信都是不可以喚起的，所以加了一個蒙板提示在瀏覽器打開；在QQ里，Android是可以喚起App的，iOS不可以，所以也需要提示用戶在瀏覽器打開。

function jump(myurl) {	
	var timeout = 2300, timer = null;
	if(GetMobelType.weixin) {
		$("#bgCoverOPen").show();		
	} else {
		var startTime = Date.now();
		if(GetMobelType.android) {
			var ifr = document.createElement('iframe');
			ifr.src = myurl;//這里是喚起App的協議，有Android可愛的同事提供
			ifr.style.display = 'none';
			document.body.appendChild(ifr);
			timer = setTimeout(function() {
				var endTime = Date.now();
				if(!startTime || endTime - startTime < timeout + 300) {
					document.body.removeChild(ifr);
					window.open("喚起失敗跳轉的鏈接");
				}
			}, timeout);
		}
		if(GetMobelType.ios || GetMobelType.iPhone || GetMobelType.iPad) {
			if(GetMobelType.qq) {
				$("#bgCoverOPen").show(); //提示在瀏覽器打開的蒙板
			} else {
				/*var ifr = document.createElement("iframe");
				ifr.src = myurl;
				ifr.style.display = "none";*/ iOS9+不支持iframe喚起app
				window.location.href = myurl; //喚起協議，由iOS小哥哥提供
				//document.body.appendChild(ifr);
				timer = setTimeout(function() {
					window.location.href = "ios下載的鏈接";
				}, timeout);
			};
		}
	}
}

　3、如上所示，這里在測試過程中發現打開App再回到網頁，或者點擊喚起的等待時間超出我們自己設定的時間2300時，網頁會自動跳轉到下載界面，這里是定時器的超出，目前沒有明確的辦法處理，但是加了一個處理的時間，

　　　　　　　　　　$(document).on('visibilitychange webkitvisibilitychange', function() {
			var tag = document.hidden || document.webkitHidden;
		    if (tag) {
		        clearTimeout(timer);
		    }
		})
		$(window).on('pagehide', function() {
		    clearTimeout(timer);
		})

　結合上面 方法一起使用可以阻止界面打開App再回到網頁的展示下載頁面，親測有效，但是無法阻止界面用戶喚起等待不操作時間超出這一跳轉。

4、另一個坑就是開始說的iOS9+iframe喚起無效，只能使用location喚起，但是會出現彈窗

這個在請教大神的時候說的都是推薦使用Universal Links，需要客戶端服務端配合解決，這里因為我們的iOS小哥哥一直在修復歷史bug，開發新需求，暫時沒有進行，會持更新。問題相關可以在疑問帖這里查看。

 

大家如果有其他解決方法也可以聯系我，請多多指教，蟹蟹。