<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 提示是否安裝，僅ios支持-->
<meta data-react-helmet="true" name="apple-itunes-app" content="app-id=432274380, app-argument=zhihu://questions/20053940" data-reactid="10"/>
<title>this‘s a demo</title>
</head>
<body>
<a href="javascript:;" id="openApp">知乎客戶端</a>
<input type="text" name="ee" autocomplete="on">
<div style="float: width:100%;height: 34px;">
<div style="float: left;width: 140px;height: 34px; background: blue"></div>
<div style="float: right;width: 80px;height: 34px;background: red"></div>
<div style="display: block;overflow: hidden;background: green;height: 34px;"></div>
</div>
</body>
</html>
<script type="text/javascript">
/**
一、https://blog.html5funny.com/2015/06/19/open-app-from-mobile-web-browser-or-webview/
二、http://web.jobbole.com/86706/ 瀏覽器中喚起 native app，否則跳轉到應用商城下載
三、https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html apple官網對 universal links 的文檔
四、http://strivingboy.github.io/blog/2015/09/27/ios9/ iOS9 Universal Links （通用鏈接）
五、http://www.cocoachina.com/ios/20150902/13321.html iOS 9學習系列：打通 iOS 9 的通用鏈接（Universal Links）
六、http://www.jianshu.com/p/16374288c976 Universal Links通用鏈接應用跳轉總結以及坑
七、universal link調研結果：
適合場景：
1.發短信和iMessage里面包含鏈接，如果安裝應用跳轉應用，否則打開web頁面。
2.可以自定義“下載x應用”和“打開x應。用”應用界面，這樣的好處點擊打開應用如果安裝直接打開，如果沒有安裝去下載界面。
3.某一個通過搜索進入的較大的二級域名的服務可以部署打開應用，風險：可能會傷害我們的seo排名
hack場景：
1.可以某一天通過web頁面訪問且安裝的用戶全部啟動app，但是這樣會傷害用戶（用戶不知道為什么啟動了應用，可能因此卸載應用），如果我們以后有特殊原因需要使用可以開發備用。
【hack方式是在一個二級域名里面嘗試訪問另一個二級域名觸發打開應用行為，如果成功則打開，失敗則跳到二級頁面—>302—>回到本頁面】
注意事項：
1.當前域名不能和跳轉域名一致
2.不支持302跳轉
3.訪問域名后不支持本域名的universal link跳轉
4.二級域名可以跳轉其他域名
5.ios9以上可以使用
universal link的坑
1.配置證書需要是https，但頁面載體可以是http的頁面
2.需要制定路徑來區分跳轉 需要更近一測試多路徑
3.當前頁面如果已經加在好，則雖然是觸發url，但是不會觸發universal link
4.二級域名的測試是否有兼容問題
八、市面上h5喚起app（不論微信還是普通瀏覽器） 有三種方式
1 第三方 (魔窗,linkedME)
2 與騰訊深度合作的app 比如(keep) 在微信的白名單里 通過 jssdk 的 launch3rdApp 喚起
3 universal link
**/
//
//判斷系統
// var n = {
// Edge: /Edge/i,
// Wechat: /MicroMessenger/,
// Weibo: /Weibo/,
// QQ: /\sQQ\//,
// Mobile: /Mobile/,
// Android: /Android/,
// iOS: /iPhone|iPad|iPod/,
// isAppleDevice: /iPad|iPhone|iPod|Mac OS X/,
// Zhihu: /Zhihu|osee2unifiedRelease|Futureve/,
// isBot: /Baiduspider|Sogou\s\w+\sspider|Yisouspider|Googlebot|Bingbot|360Spider/
// };
// function n() {
// o.iOS = /iPad|iPhone/.test(i), o.ANDROID = /Android/.test(i), o.WECHAT = /MicroMessenger/.test(i), o.WEIBO = /Weibo/.test(i), o.UC = /UCBrowser/.test(i), o.MOBILE_CHROME = /Mobile/.test(i) && /CriOS/.test(i), "undefined" != typeof window && (o.WKWebView = o.iOS && Boolean(window.indexedDB))
// }
// var i = navigator.userAgent.indexOf("Windows Phone") >= 0,
// a = navigator.userAgent.indexOf("Android") > 0 && !i,
// u = /iP(ad|hone|od)/.test(navigator.userAgent) && !i,
// c = u && /OS 4_\d(_\d)?/.test(navigator.userAgent),
// s = u && /OS [6-7]_\d/.test(navigator.userAgent),
// l = navigator.userAgent.indexOf("BB10") > 0;
var timeout;
//安卓和ios以及微信和qq的打開app協議和跳轉到下載app市場的協議可能不同
document.getElementById('openApp').onclick = function(e){
var locationHref = window.location;
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
// 我們還需要知道的一點是，微信里屏蔽了schema協議。除非你是微信的合作伙伴之類的，他們專門給你配置進白名單，否則我們就沒辦法通過這個協議在微信中直接喚起app。
// 因此我們會判斷頁面場景是否在微信中，如果在微信中，則會提示用戶在瀏覽器中打開。
// 如何判斷本地是否安裝了app
var ifr = document.createElement("iframe");
ifr.src = "zhihu://"; /***打開app的協議，有ios同事提供 itms-apps://itunes.apple.com/app/apple-store/id432274380***/
ifr.style.display = "none";
document.body.appendChild(ifr);
timeout = setTimeout(function(){
document.body.removeChild(ifr);
window.location.href = "https://oia.zhihu.com/articles/27494849"; /***下載app的地址***/
},500)
}else if(navigator.userAgent.match(/android/i)){
//在安卓下有彈層提示是否進去下載應用商店，並且如果已經安裝進去app后返回 瀏覽器進去瀏覽器進入下載頁面並且刷新頁面時又進如app，知乎appye
var ifr = document.createElement('iframe');
ifr.src = 'zhihu://articles/27494849'; // shoule configure at AndroidManifest.xml
ifr.style.display = 'none';
document.body.appendChild(ifr);
// var t ="zhihu://articles/27494849";
// t += "backupurl=" + encodeURIComponent("mstore://details?package_name=com.zhihu.android&source_apkname=com.zhihu.android&source_info=zhihu")
timeout = setTimeout(function() {
document.body.removeChild(ifr);
window.location = "https://oia.zhihu.com/articles/27494849";//android 下載地址 安卓的下載地址和ios不同,安卓的下載地址最好不要跳轉到另外一頁，最好在當前頁面，不然安卓下不管是否安裝該app總是先跳轉到該下載頁面並且跳轉app后再回來的時候瀏覽器停留在下載頁面，因為有時候網絡慢或者打開app的時間過長就會導致跳轉到了下載頁面，即使也打開了app，但是在回到瀏覽器就跳轉到了下載頁面，所以安卓下最好下載地址不要重新定義一個頁面
//安卓或者直接下載app e.Wechat || e.Weibo ? s(t) : e.QQ || (window.location = 'https://api.zhihu.com/client/download/apk/latest')
}, 800);
if (document.addEventListener) {
document.addEventListener("webkitvisibilitychange", clean);
document.addEventListener("visibilitychange", clean);
document.addEventListener("pagehide", clean);
} else if (document.attachEvent) {
//document.attachEvent("onclick", myFunction);
}
}else{
window.location.href = "https://oia.zhihu.com/articles/27494849";
}
}
function clean() {
clearTimeout(timeout);
window.location.href = locationHref;
}
</script>
