How to handle deeplink redirect fails cross browser

Question

I am attempting to redirect to a custom scheme to deeplink to an iOS and Android application. Behaviour is different cross browsers so I am trying to find a consistent solution. Below is my jQuery and behaviours in different browsers.

$(document).ready(function (){

    console.log(window.location.href);

    window.location.href = window.location.href.replace('http','custom').replace('https','custom');

    //I am waiting 2 seconds for this to succeed before trying to launch 
      device app store or www site if on an unsupported device/web browser

    window.setTimeout(function(){

        console.log(navigator.userAgent.toLowerCase());

        if(navigator.userAgent.toLowerCase().indexOf("android") > -1){

            console.log('Android');
            window.location.href = 'https://play.google.com/store/apps/details?id=';

        }else if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){

            console.log('iOS');
            window.location.href = 'https://itunes.apple.com/us/app/';

        }else{

            console.log('Other');
            window.location.href = 'https://www.website.com';

        }
    },2000);
//wait for 2000 milliseconds before trying to redirect to stores. 
           //this is crap it would be better to wait for an error or respond
           //to the Chrome External Protocol Request dialog

    });

Chrome launches the External Protocol Request dialog. If this isnt responded to within 2 seconds or if user clicks 'Do Nothing' the redirect works

Firefox just fails to handle the custom URL scheme and displays 'The address wasn't understood'

IE Launches the App Store dialog and successfully redirects(!)

Safari launches Cancel/Choose Application/Search App Store dialog but does not redirect. Any interaction results in 'Safari cant open the specified address'.

It would be much better to capture an event (if possible) from the respective dialogs to trigger the redirect. 2 seconds wait is arbitrary and probably wont always work.

Any help much appreciated.

score 0 · Answer 1 · edited May 23 '17 at 10:34

I got there in the end following this help: How to check if a custom protocol supported

This checks the deeplinking code exists and if not just does a redirect. If it does it attempts to change window.href value and if that errors just do the normal redirect.

$(document).ready(function (){

        console.log(window.location.href);

        var code = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);

        console.log(code);

        if(code != undefined && code !=""){

            console.log('Code is '+code);

            try{

                window.location.href = window.location.href.replace('http','custom').replace('https','custom');

            }catch(e){

                console.log('In error catch');

                redirectStores();

            }

        }else{
            console.log('No code here..');

            redirectStores();
        }

    });

    var redirectStores = function(){

        console.log(navigator.userAgent.toLowerCase());

        if(navigator.userAgent.toLowerCase().indexOf("android") > -1){

            console.log('Android');
            window.location.href = 'https://play.google.com/store/apps/details?id=';//add app id

        }else if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){

            console.log('iOS');
            window.location.href = 'https://itunes.apple.com/us/app/';//add app id

        }else{

            console.log('Other');
            window.location.href = 'https://www.example.com';

        }

    }

How to handle deeplink redirect fails cross browser

1 Answers1