AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

How to deeplink your app from web for both iOS and Android devices

March 17th, 2015

You've created an app, and you've done the work to make it accessible via deeplinking patterns on iOS or Android,now how do you deeplink from your website, and how do you redirect to the app-store if your app doesn't exist on the user's device? Here is the way I did it with a brief explanation:

iOS

function launchiOSApp(url) {
     var appleAppStoreLink = 'https://itunes.apple.com/us/app/MY-APP/APPID';
     var now = new Date().valueOf();
     setTimeout(function () {
          if (new Date().valueOf() - now > 500) return;
          window.location = appleAppStoreLink;
     }, 100);
     window.location = url;
}


$(function() {
     $('#my-link').click( function () { 
          launchiOSApp('YOUR-URL-DEEP-LINK'); 
     });
});

Explained:  

What we are doing here for iOS is attempting to redirect the browser to a deeplink url (YOUR-URL-DEEP-LINK) when the link is clicked. We wait 100ms and then attempt to launch the app store link you provided. With Safari iOS behavior, all timers are stopped when the user launches another app or leaves the Safari app. Now, if an app is NOT present, the browser should continue execution of the script, which waits 100ms and then redirects the browser to the app store. If your app IS present, iOS will launch your app and the roundtrip time between launching your app and a user potentially returning to the webpage will be longer than 500ms, thereby bypassing the execution of the redirect to the app store.

Android

function launchIframeApproach(url, alt) {
    var iframe = document.createElement("iframe");
    iframe.style.border = "none";
    iframe.style.width = "1px";
    iframe.style.height = "1px";
    iframe.onload = function() {
        document.location = alt;
    }
    document.body.appendChild(iframe);
}

function launchWebkitApproach(url, alt) {
    document.location = url;
    timer = setTimeout(function () {
        document.location = alt;
    }, 2500);
}

function launchAndroidApp(url) {
    var androidAppStore = "http://market.android.com/details?id=MYAPP-PACKAGE-NAME";
    var g_intent = "scheme=MYAPP;package=MYAPP-PACKAGE-NAME;end"; //see notes below
    
    if(navigator.userAgent.match(/Chrome/)) {
         var intent = url.replace('MYAPP', 'intent') + '#Intent;' + g_intent; //see notes below
         document.location = intent;
    } 
    else if (navigator.userAgent.match(/Firefox/)) {
         launchWebkitApproach(url, androidAppStore);
         setTimeout(function () {
              launchIframeApproach(url, androidAppStore);
         }, 1500);
    }
    else {
        launchIframeApproach(url, androidAppStore);
    }
}

$(function() {
     $('#my-link').click( function () { 
          launchAndroidApp('YOUR-URL-DEEP-LINK'); 
     });
});

Explained:

With Android, there are two ways to launch your app.  First is to open a hidden iframe window and set it's location to your app's deeplink.  This will work for both Android and Firefox browsers, this will not work for Chrome Browsers 25+ however.  For Chrome browsers 25+, use Intents with Chrome.  With Intents, if your app is not installed on the user's device, the Google Play store will open up automatically based on the package name given in the Intent link.  

With the above code, I replace the deeplink URL with an Intent designator.  So for example, if my deeplink is:  MYAPP://deeplink,  I change it so that it becomes:  Intent://deeplink which when placed into an Intent link should look something like this:   Intent://deeplink#Intent;scheme=MYAPP;package=MYAPP-PACKAGE-NAME;#end

I highly advise to review the documentation for Intents for proper formatting of your intent link.

Both Together?

Now just tie them together to capture both Android and iOS users. Add only one click event on your deep link instead:


$(function() {
     $('#my-link').click( function () { 
          var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
          if(!iOS) {
              launchAndroidApp('YOUR-URL-DEEP-LINK'); 
          }
          else {
              launchiOSApp('YOUR-URL-DEEP-LINK');
          }
     });
});

Hope that helps!



Popular Posts