Can I make a link that will open in my app if it's installed, and fall back to a different URL if not?
Users can share files from our app via twitter. The tweet includes a URL that points at our server, which detects whether the user is on a mobile device and redirects to a URL using our app's custom scheme so that the link opens in our app.
This works fine for desktop users, and for mobile users who have our app installed; but it doesn't work for mobile users who don't. So what we'd like to do instead is to show all users a page that contains a link which, when pressed, will open the app with the custom URL scheme if it is supported, and open a different URL where the user can download our app if not.
So what I'm looking for is an answer in HTML or JS that looks a bit like this:
<a href="ourapp://www.ourdomain.com/files/12345"
fallbackhref="http://www.ourdomain.com/buyourapp">Click to download</a>
Is that possible? If so, how do we do it?
Answer
You can achieve this in Android using the following piece of code :
function openLink () {
var appWindow = window.open("ourapp://www.ourdomain.com/files/12345","_blank");
setTimeout( function () {if (appWindow) {
appWindow.location ="http://www.ourdomain.com/buyourapp";
}
},1000);
}
Call the openLink() function on click of a link (else the browser will block the new window as popup).
iOS would differ because of the way it handles custom schemes.
For iOS you need to do the following : Create 2 HTML files with the following code snippets
File #1 : This is your link to open the app/ fallback to website
<script type="text/javascript">
function openLink (url,customURI) {
window.open("file2.html?lp="+url+"&customURI="+customURI,"_blank");
}
</script>
<img src="IMAGE SOURCE" onclick="openLink('LANDING PAGE','CUSTOM URI')">
File #2 :
<html>
<script>
function openApp () {
var start, end, elapsed;
var params = window.location.href.split("lp=")[1];
var url = params.split("&customURI=")[0];
var customURI = params.split("&customURI=")[1];
var time = (new Date()).getTime();
document.location = customURI+url;
setTimeout(function(){
var now = (new Date()).getTime();
if((now - time)<2550) {
javascript: console.log(new Date().getTime());
document.location = url;
}
else{
window.open('', '_self', '');
window.close();
}
}, 2000);
}
</script>
<body onload="openApp()">
<a onclick="openApp()" id="newButton">Click Here to open the App</a>
</body>
Hope this helps :)