11

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?

Simon
  • 25,468
  • 44
  • 152
  • 266

1 Answers1

4

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 :)

Akshat Singhal
  • 1,801
  • 19
  • 20
  • Surely there are optimisations and improvements possible in the code but this works fine. – Akshat Singhal Dec 10 '13 at 11:13
  • Can you do it without hardcoding the URL? I'd need to be able to specify the link in the original JS (file 1 in your scheme) – Simon Dec 13 '13 at 12:24