(軟體工程)【DeepLink深度鏈結】使用JavaScript連接Google & Apple 商店App

前情提要：

現今是個手機與行動裝置的時代，行動的使用率與方便性是考量的要素之一，DeepLink深度鏈結是蠻重要的的技術，在此研究一下。

本人是以網頁起手，就先來研究以JavaScript的例子，點擊連結直接開啟Google或Apple的商店，可以應用在提供他人下載App的方便性，後續將延伸如何直接開啟App中的某頁面。

善用Deep Link的目的：

Web可以被Google搜尋引擎索引，可以增加SEO的訪問量提高App下載量和開啟率。

URL Scheme：

URI、URL、URN

補充：https://danielmiessler.com/study/difference-between-uri-url/#gs.M5gPOG4

download_link：

download_link就是可以開啟到App的下載頁面的方式。

// android
window.location = ('https://play.google.com/store/apps/details?id=com.facebook.katana');
// iOS
window.location = ('https://apps.apple.com/tw/app/facebook/id284882215');

schem_link：

schem_link是能夠進到App中的某一個畫面，如果使用有裝App的情況下，則可以直接進去App裡面。

//javascript code
function iOSOpenApp(){
var download_link, iframe, loadDateTime, redirected, scheme_link, t;
scheme_link = $(this).data("app-scheme");
download_link = $(this).data("download-url");
redirected = false;
if (navigator.userAgent.match(/FBIOS/i)) {
  document.writeln("請按上或下方的箭頭，選擇「在 Safari 開啟」以繼續進行活動。");
return;
}
if (navigator.userAgent.match(/Windows Phone/i)) {
loadDateTime = new Date();
setTimeout(function() {
var timeOutDateTime;
timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location = download_link;
}
}, 1000);
window.location = scheme_link;
} else if (navigator.userAgent.match(/Android/i)) {
if (navigator.userAgent.match(/Chrome/i)) {
if (+navigator.userAgent.match(/(chrome(?=\/))\/?\s*(\d+)/i)[2] >= 41) {
window.location = scheme_link;
setTimeout(function() {
if (!document.webkitHidden && !redirected) {
redirected = true;
window.location = download_link;
}
}, 1000);
} else {
window.location = scheme_link;
alert("若您看到錯誤畫面，請先安裝 某某 App 喔！");
}
} else {
iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
t = setTimeout(function() {
window.location = download_link;
}, 1000);
iframe.onload = function() {
clearTimeout(t);
};
iframe.src = scheme_link;
document.body.appendChild(iframe);
}
} else if (navigator.userAgent.match(/(iPhone|iPad|iPod)/i)) {
setTimeout(function() {
if (!document.webkitHidden) {
window.location = download_link;
}
}, 25);
window.location = scheme_link;
} else {
loadDateTime = new Date();
setTimeout(function() {
var timeOutDateTime;
timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location = download_link;
}
}, 1000);
window.location = scheme_link;
}
};