瀏覽器判別下載安裝/開啟Android應用程式
阿新 • • 發佈:2018-10-31
摘要: 通過手機瀏覽器直接開啟Android應用程式。 如果本地已經安裝了指定Android應用,就直接開啟它; 如果沒有安裝,則直接下載該應用的安裝檔案(也可以跳轉到下載頁面)。
之前寫過一篇blog,介紹如何通過點選手機瀏覽器中的連結,直接開啟本地Android App。
實現方式不太完美,最近看了微博、京東的手機版網頁,感覺他們的實現方式很不錯,研究了一下,實現以下效果:
如果本地已經安裝了指定Android應用,就直接開啟它;如果沒有安裝,則直接下載該應用的安裝檔案(也可以跳轉到下載頁面)。
實現效果
如下圖所示,在手機瀏覽器中訪問京東的手機版網站(m.jd.com),頂部會有一個廣告圖,點選這個廣告圖,如果手機上已經安裝了京東App,則直接開啟,如果沒有安裝,則開始下載。
實現方式
1.為Android應用的啟動Activity設定一個Schema,如下:
<data android:host="splash" android:scheme="cundong"/>
2.使用者點選瀏覽器中的連結時,在動態建立一個不可見的iframe,並且讓這個iframe去載入步驟1中的Schema,如下:
var ifr = document.createElement('iframe');
ifr.src="cundong://splash"
3,如果在指定的時間內沒有跳轉成功,則當前頁跳轉到apk的下載地址(或下載頁),如下:
window.location = download_url;
HTML程式碼
//不支援 跳轉IOS App Store 下載頁面原文連結:<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>this's a demo</title> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui"> </head> <body> <div> <a id="J-call-app" href="javascript:;" class="label">立即開啟>></a> <input id="J-download-app" type="hidden" name="storeurl" value="http://m.chanyouji.cn/apk/chanyouji-2.2.0.apk"> </div> <script> (function(){ var ua = navigator.userAgent.toLowerCase(); var t; var config = { /*scheme:必須*/ scheme_IOS: 'cundong://', scheme_Adr: 'cundong://splash', download_url: document.getElementById('J-download-app').value, timeout: 600 }; function openclient() { var startTime = Date.now(); var ifr = document.createElement('iframe'); ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr; ifr.style.display = 'none'; document.body.appendChild(ifr); var t = setTimeout(function() { var endTime = Date.now(); if (!startTime || endTime - startTime < config.timeout + 200) { window.location = config.download_url; } else { } }, config.timeout); window.onblur = function() { clearTimeout(t); } } window.addEventListener("DOMContentLoaded", function(){ document.getElementById("J-call-app").addEventListener('click',openclient,false); }, false); })() </script> </body> </html>
相容 開啟/下載 IOS/ANDROID 應用
var APPCommon = {
iphoneSchema: 'XingboTV://',
iphoneDownUrl: 'https://itunes.apple.com/cn/app/xing-botv-mei-nu-shuai-ge3d/id1098066581?l=en&mt=8',
androidSchema: 'scheme://com.xingbo/',
androidDownUrl: 'http://webrs.xingbo.tv/app/XingboLive-release.apk',
openApp: function(){
var this_ = this;
//微信
if(this_.isWeixin()){
$(".weixin-tip").css("height",$(window).height());
$(".weixin-tip").show();
$('.weixin-tip').on('touchstart', function () {
$(".weixin-tip").hide();
});
}else{//非微信瀏覽器
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
var loadDateTime = new Date();
window.setTimeout(function() {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location = this_.iphoneDownUrl;//ios下載地址
} else {
window.close();
}
},25);
window.location = this.iphoneSchema;
}else if (navigator.userAgent.match(/android/i)) {
try {
window.location = this_.androidSchema;
setTimeout(function(){
window.location=this_.androidDownUrl; //android下載地址
},500);
} catch(e) {}
}
}
},
isWeixin: function(){ //判斷是否是微信
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
};
原文連結
AndroidMainfext.xml
<activity
android:name=".activity.LauncherActivity"
android:configChanges="orientation|keyboardHidden|navigation|screenSize"
android:label="@string/app_name"
android:screenOrientation="portrait" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:host="splash" android:scheme="cundong" />
</intent-filter>
</activity>